应该总使用接受一个 function 作为参数的 $apply() 方法。这是因为当传入一个 function 到 $apply() 中的时候,这个 function 会被包装到一个 try…catch 块中,所以一旦有异常发生,该异常会被 $exceptionHandler service 处理。
想象一下如果有个 alert 框显示错误给用户,然后有个第三方的库进行一个网络调用然后失败了,如果不把它封装进 $apply 里面,Angular 永远不会知道失败了,alert 框就永远不会弹出来了。
在 AngularJS 中使用 $watch注意事项?如果要监听的是一个对象,那还需要第三个参数
$scope.data.name = 'htf'; $scope.$watch('data', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; }, true);表示比较的是对象的值而不是引用,如果不加第三个参数 true ,在 data.name 变化时,不会触发相应操作,因为引用的是同一引用。
脏检查的范围前面说到:angular 会对所有绑定到 UI 上的表达式做脏检查。其实,在 angular 实现内部,所有绑定表达式都被转换为 $scope.$watch()。每个 $watch 记录了上一次表达式的值。有 ng-bind="a" 即有 $scope.$watch('a', callback),而 $scope.$watch 可不会管被 watch 的表达式是否跟触发脏检查的事件有关。
例如:
<div ng-show="false"> <span id="span1" ng-bind="content"></span> </div> <span id="span2" ng-bind="content"></span> <button ng-click="">TEST</button>问:点击 TEST 这个按钮时会触发脏检查吗?触发几次?
首先:ng-click="" 什么都没有做。angular 会因为这个事件回调函数什么都没做就不进行脏检查吗?不会。
然后:#span1 被隐藏掉了,会检查绑定在它上面的表达式吗?尽管用户看不到,但是 $scope.$watch('content', callback) 还在。就算你直接把这个 span 元素干掉,只要 watch 表达式还在,要检查的还会检查。
再次:重复的表达式会重复检查吗?会。
最后:别忘了 ng-show="false"。可能是因为 angular 的开发人员认为这种绑定常量的情况并不多见,所以 $watch 并没有识别所监视的表达式是否是常量。常量依旧会重复检查。
所以:
答:触发三次。一次 false,一次 content,一次 content
所以说一个绑定表达式只要放在当前 DOM 树里就会被监视,不管它是否可见,不管它是否被放在另一个 Tab 里,更不管它是否与用户操作相关。
另外,就算在不同 Controller 里构造的 $scope 也会互相影响,别忘了 angular 还有全局的 $rootScope,你还可以 $scope.$emit。angular 无法保证你绝对不会在一个 controller 里更改另一个 controller 生成的 scope,包括 自定义指令(Directive)生成的 scope 和 Angular 1.5 里新引入的组件(Component)。
所以说不要怀疑用户在输入表单时 angular 会不会监听页面左边导航栏的变化。
如何优化脏检查与运行效率脏检查慢吗?
说实话脏检查效率是不高,但是也谈不上有多慢。简单的数字或字符串比较能有多慢呢?十几个表达式的脏检查可以直接忽略不计;上百个也可以接受;成百上千个就有很大问题了。绑定大量表达式时请注意所绑定的表达式效率。建议注意一下几点:
表达式(以及表达式所调用的函数)中少写太过复杂的逻辑
不要连接太长的 filter(往往 filter 里都会遍历并且生成新数组)
不要访问 DOM 元素。
1、使用单次绑定减少绑定表达式数量
单次绑定(One-time binding 是 Angular 1.3 就引入的一种特殊的表达式,它以 :: 开头,当脏检查发现这种表达式的值不为 undefined 时就认为此表达式已经稳定,并取消对此表达式的监视。这是一种行之有效的减少绑定表达式数量的方法,与 ng-repeat 连用效果更佳(下文会提到),但过度使用也容易引发 bug。
2、善用 ng-if 减少绑定表达式的数量
如果你认为 ng-if 就是另一种用于隐藏、显示 DOM 元素的方法你就大错特错了。
ng-if 不仅可以减少 DOM 树中元素的数量(而非像 ng-hide 那样仅仅只是加个 display: none),每一个 ng-if 拥有自己的 scope,ng-if 下面的 $watch 表达式都是注册在 ng-if 自己 scope 中。当 ng-if 变为 false,ng-if 下的 scope 被销毁,注册在这个 scope 里的绑定表达式也就随之销毁了。
考虑这种 Tab 选项卡实现:
<ul> <li ng-class="{ selected: selectedTab === 1 }">Tab 1 title</li> <li ng-class="{ selected: selectedTab === 2 }">Tab 2 title</li> <li ng-class="{ selected: selectedTab === 3 }">Tab 3 title</li> <li ng-class="{ selected: selectedTab === 4 }">Tab 4 title</li> </ul> <div ng-show="selectedTab === 1">[[Tab 1 body...]]</div> <div ng-show="selectedTab === 2">[[Tab 2 body...]]</div> <div ng-show="selectedTab === 3">[[Tab 3 body...]]</div> <div ng-show="selectedTab === 4">[[Tab 4 body...]]</div>对于这种会反复隐藏、显示的元素,通常人们第一反应都是使用 ng-show 或 ng-hide 简单的用 display: none 把元素设置为不可见。