$同时观察多个属性并仅触发一次回调

Question

我想知道在评估指令的所有(或仅一些)属性(没有隔离范围)之后,只能执行一次回调.将配置传递给指令真的很棒.问题是你可以分别观察每个属性并多次触发回调.

在示例中,我们有一个没有隔离范围的指令,它遵守两个属性:name和surname.在任何更改action回调被触发后:

HTML

<button ng-click="name='John';surname='Brown'">Change all params</button>
<div person name="{{name}}" surname="{{surname}}"></div>

JS

angular.module('app', []).

directive('person', function() {
  return {
    restrict: 'A',
    link: function($scope, $elem, $attrs) {
        var action = function() {
          $elem.append('name: ' + $attrs.name + '<br/> surname: ' + $attrs.surname+'<br/><br/>');
        }
        $attrs.$observe('name', action);
        $attrs.$observe('surname', action);
    }
 }
});

这里的人物.

因此,效果是在一次点击更改名称和姓氏后,action回调被触发两次:

name: 
surname: Brown

name: John
surname: Brown

所以问题是:action名称和姓氏值都改变了,只能被解雇一次？

Answer 1

您可以使用它$watch来评估自定义函数而不是特定模型.

即

$scope.$watch(function () {
  return [$attrs.name, $attrs.surname];
}, action, true);

这将在所有$digest周期运行,并且如果$watch检测到返回数组(或者您想要构造函数的返回值)与旧值不匹配,$watch则将触发回调参数.如果您确实使用对象作为返回值,请确保将true值保留为最后一个参数,$watch以便$watch进行深度比较.