Angular 根据 service 的状态更新 directive  更新时间:2016年04月03日 12:58:52   作者:好JSER   Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。本文给大家介绍Angular 根据 service 的状态更新 directive,需要的朋友一起学习吧 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: ` {{statusDisplay}} `, 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: ` {{vm.statusDisplay}} } 这样一来,大部分逻辑都可以挪到 controller 中。如果没有 DOM 操作我们甚至可以不写 link 方法。也没必要加入额外的 $watch 和 $on 。只是因为 dirty-checking 的特性,绑定到 template 的属性往往会多计算几次。所以属性必须非常简单。大部分情况下这不会有什么问题。 以上内容是小编给大家介绍的Angular 根据 service 的状态更新 directive,希望对大家有所帮助! 您可能感兴趣的文章: 学习AngularJs:Directive指令用法(完整版) AngularJS中的Directive实现延迟加载 AngularJS入门心得之directive和controller通信过程 AngularJS directive返回对象属性详解 AngularJS中的Directive自定义一个表格 AngularJs directive详解及示例代码 AngularJS中directive指令使用之事件绑定与指令交互用法示例 Angularjs使用directive自定义指令实现attribute继承的方法详解 angularjs使用directive实现分页组件的示例 详解angular2采用自定义指令(Directive)方式加载jquery插件 angularjs directive 相关文章 AngularJS模仿Form表单提交的实现代码 本文通过一段实例代码给大家简单介绍了angularjs模仿form表单提交的方法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧 2016-12-12 AngularJS使用ng-app自动加载bootstrap框架问题分析 这篇文章主要介绍了AngularJS使用ng-app自动加载bootstrap框架问题,分析了前面文章中所述的ng-app自动加载bootstrap出现的错误原因与相应的解决方法,需要的朋友可以参考下 2017-01-01 动手写一个angular版本的Message组件的方法 本篇文章主要介绍了动手写一个angular版本的Message组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 AngularJS ng-repeat遍历输出的用法 本篇文章主要介绍了AngularJS ng-repeat遍历输出的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 深究AngularJS如何获取input的焦点(自定义指令) 本篇文章主要介绍了AngularJS如何获取input的焦点(自定义指令),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 angular实现spa单页面应用实例 本篇文章主要介绍了angular实现spa单页面应用实例,小本篇文章是对单页面的一个简单的基本逻辑操作,这个方法可以搭建基本的单页面的逻辑结构。一起跟随小编过来看看吧 2017-07-07 实例剖析AngularJS框架中数据的双向绑定运用 这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下 2016-03-03 Angular路由ui-router配置详解 这篇文章主要介绍了Angular路由ui-router配置详解,非常不错,具有一定得参考借鉴价值,需要的朋友参考下吧 2018-08-08 AngularJs bootstrap搭载前台框架——js控制部分 本文主要介绍AngularJs bootstrap搭载前台框架js控制部分的资料,这里有实现代码,有兴趣的小伙伴可以参考下 2016-09-09 关于Angular2 + node接口调试的解决方案 这篇文章主要给大家介绍了关于Angular2 + node接口调试的解决方案,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-05-05 最新评论

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,希望对大家有所帮助!

您可能感兴趣的文章:

  • 学习AngularJs:Directive指令用法(完整版)
  • AngularJS中的Directive实现延迟加载
  • AngularJS入门心得之directive和controller通信过程
  • AngularJS directive返回对象属性详解
  • AngularJS中的Directive自定义一个表格
  • AngularJs directive详解及示例代码
  • AngularJS中directive指令使用之事件绑定与指令交互用法示例
  • Angularjs使用directive自定义指令实现attribute继承的方法详解
  • angularjs使用directive实现分页组件的示例
  • 详解angular2采用自定义指令(Directive)方式加载jquery插件
张贴在3