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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
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
基于empty函数的判断详解
2013/06/17 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
javascript中常用编程知识
2013/04/08 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
python实现远程控制电脑
2019/05/23 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
文员自我评价怎么写
2013/09/19 职场文书
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
学生周末长期请假条
2014/02/15 职场文书
倡议书格式范文
2014/04/14 职场文书
校园文明标语
2014/06/13 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
南京大屠杀观后感
2015/06/02 职场文书