Angular 根据 service 的状态更新 directive


Posted in Javascript onApril 03, 2016

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。这里AngularJS就应运而生,弥补了HTML的天然缺陷,用于构件Web应用等。

TL;DR

这篇文章讲解了三种根据 service 的状态更新 directive 的做法。分别是 $watch 表达式,事件传递,和 controller 的计算属性。

问题

我有一个 readerService ,其中包含一些状态信息(比如连接状态和电量)。现在我需要做一个 directive 去展示这些状态。因为它只需要从 readerService 中获取数据,不需要任何外部传值,所以我直接把 service 注入进去。但如何更新就成了一个问题。

service 的代码如下。

const STATUS = {
DETACH: 'DETACH',
ATTACH: 'ATTACH',
READY: 'READY'
}
class ReaderService {
constructor() {
this.STATUS = STATUS
// The status will be changed by some callbacks
this.status = STATUS.DETACH
}
}
angular.module('app').service('readerService', readerService)

directive 代码如下:

angular.module('app').directive('readerIndicator', (readerService) => {
const STATUS = readerService.STATUS
const STATUS_DISPLAY = {
[STATUS.DETACH]: 'Disconnected',
[STATUS.ATTACH]: 'Connecting...',
[STATUS.READY]: 'Connected',
}
return {
restrict: 'E',
scope: {},
template: `
<div class="status">
{{statusDisplay}}
</div>
`,
link(scope) {
// Set and change scope.statusDisplay here
}
}
})

我尝试过以下几种办法,下面一一介绍。

方法一:$watch

第一个想到的方法就是在 directive 中用 $watch 去监视 readerService.status 。因为它不是 directive scope 的属性,所以我们需要用一个函数来包裹它。Angular 会在 dirty-checking 时计算和比较新旧值,只有状态真的发生了改变才会触发回调。

// In directive
link(scope) {
scope.$watch(() => readerService.status, (status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

这个做法足够简单高效,只要涉及 readerService.status 改变的代码会触发 dirty-checking ,directive 就会自动更新。service 不需要修改任何代码。

但如果有多个 directive 的属性都受 service status 的影响,那 $watch 代码就看得比较晦涩了。尤其是 $watch 修改的值会影响其他的值的时候。比如:

// In directive
link(scope) {
scope.$watch(() => readerService.status, (status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
scope.showBattery = status !== STATUS.DETACH
})
scope.$watch('showBattery', () => {
// some other things depend on showBattery
})
}

这种时候声明式的编程风格会更容易看懂,比如 Ember 或 Vue 里面的 computed property 。这个待会讨论。

方法二:$broadcast/$emit + $on

这种思路是 service 每次状态改变都发送一个事件,然后 directive 监听事件来改变状态。因为 directive 渲染的时候也许 status 已经更新了。所以我们需要在 link 中计算一个初始值。

我最开始是用 $broadcast 去做的。代码如下:

// In service
setStatus(value) {
this.status = value
// Need to inject $rootScope
this.$rootScope.$broadcast('reader.statusChanged', this.status)
}
// In directive
link(scope) {
scope.statusDisplay = STATUS_DISPLAY[nfcReaderService.status]
scope.$on('reader.statusChanged', (event, status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

但马上发现 $broadcast 之后 UI 更新总要等 1 秒多(不过 $on 回调倒是很快)。Google 一番后知道原因是 $broadcast 是向下层所有 scope 广播,广播完成后再 dirty-checking 。一个更好的做法是使用 $emit ,它只会向上传递事件,不过不管发送事件还是监听事件都得用 $rootScope 。

修改后的代码如下:

// In service
setStatus(value) {
this.status = value
// Use $emit instead of $broadcast
this.$rootScope.$emit('reader.statusChanged', this.status)
}
// In directive
link(scope) {
scope.statusDisplay = STATUS_DISPLAY[nfcReaderService.status]
// Use $rootScope instead of scope
$rootScope.$on('reader.statusChanged', (event, status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

如果因为某些原因不得不用 $broadcast 的话,你可以在 $on 回调最后用 $digest 或 $apply 强制触发 dirty-checking ,这也可以达到快速更新 UI 的目的。

方法三:controller + property

我个人觉得前两个方法能解决问题,但代码维护性都不太好。 $watch 在属性相互关联的情况下非常难看懂, $emit/$on 需要把一些逻辑写两次(初始化 directive 时和回调执行时)。方法一中我提到了有些时候声明式的属性比 $watch 更容易看懂。这个方法就是使用 controller 。directive 可以设置自己的 controller 作为数据来源(或者说 view model),我们可以把那些需要计算的属性作为 controller 的属性。这样 dirty-checking 时它们就会自动计算。

// In directive
class ReaderController {
constructor($scope, readerService) {
this.readerService = readerService
}
get statusDisplay() {
return STATUS_DISPLAY[this.readerService.status]
}
}
return {
// ...
controller: ReaderController,
controllerAs: 'vm',
template: `
<div class="status">
{{vm.statusDisplay}}
</div>
}

这样一来,大部分逻辑都可以挪到 controller 中。如果没有 DOM 操作我们甚至可以不写 link 方法。也没必要加入额外的 $watch 和 $on 。只是因为 dirty-checking 的特性,绑定到 template 的属性往往会多计算几次。所以属性必须非常简单。大部分情况下这不会有什么问题。

以上内容是小编给大家介绍的Angular 根据 service 的状态更新 directive,希望对大家有所帮助!

Javascript 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 #Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 #Javascript
jQuery qrcode生成二维码的方法
Apr 03 #Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 #Javascript
AngularJs 60分钟入门基础教程
Apr 03 #Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 #Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
php PDO异常处理详解
2016/11/20 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
化学教师自荐信范文
2013/12/28 职场文书
自荐书范文范例
2014/02/13 职场文书
房屋出租协议书
2014/04/10 职场文书
冬季安全检查方案
2014/05/23 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
争先创优活动总结
2014/08/27 职场文书
罚站检讨书
2015/01/29 职场文书
泰山导游词
2015/02/02 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
使用MybatisPlus打印sql语句
2022/04/22 SQL Server