Page 445 - AngularJS权威教程

32.5 优化$watch 函数 425

link: function(scope, ele, attrs, ctrl) {
var unWatch = $scope.$watch(attrs.name, function(n, o) { 19
if(n != o) {
// 使用解析后的name做些什么事
// 然后移除watch 20
unWatch();
}
});
} 21
};
});
可以通过移除应用程序中所有不必要的监控器来提升性能。当你尝试从应用程序中移除每个 22
监控函数时，这个过程可能特别麻烦，特别是当你尝试移除由Angular设置的默认监控器时。
23
还可以编写自定义的指令来维护监控器，而不是使用Angular提供的内置指令。幸好，你不
必自己编写这些指令，因为有一个叫做bindonce的库已经为我们编写好了。
24
32.5.1 bindonce
25
bindonce是一个可以用于你的应用中的即插即用模块，它只保留了监控一次的指令；它还为
我们提供了传递异步数据的能力。
26
这个库提供了新的指令，用于不需要实时更新的DOM元素。这些指令会留意值的填充和验
证。一旦数据可用，它就渲染它以及子元素的内容，然后立即移除监控器。
27
使用bindonce指令时创建的独立的临时监控器会在数据变得可用时被移除。如果数据在作用
域中已经可用了，它不会创建监控器，而是渲染子元素。
28
回想一下上一个例子。我们将使用bindonce的非永久监控器（zero permanent watcher）创建
同样的例子：
29
<ul>
<li bindonce="email" ng-repeat="email in emails">
<a bo-href-i="#/from/{{ email.sender }}" bo-text="email.sender"></a>
<a bo-href-i="#/email/{{ email.id }}" bo-text="email.subject"></a> 30
</li>
</ul>
31
要使用bindonce，首先要获取其源码。可以直接从Github上的项目页面（https://github.com/
pasvaz/bindonce）得到，或者像这样使用Bower安装它：
32
bower install angular-bindonce
拿到源码之后，需要在主视图中引用它：
33
<script src="scripts/vendor/bindonce.js"></script>
最后，还需要将它作为一个依赖设置给应用程序模块： 34

angular.module('myApp', ['pasvaz.bindonce']);
35
*
现在，当我们处理静态数据时，我可以保证，在bo- 标签的帮助下，我们无需使用不必要的
监控器了。
36
bindonce库为我们提供了很多指令。正如上面看到的，我们使用了两个自定义指令。