javascript – $在同一时间观察多个属性,只有一次触发回调

前端之家收集整理的这篇文章主要介绍了javascript – $在同一时间观察多个属性,只有一次触发回调前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不知道在评估指令的所有(或只有一些)属性(没有隔离范围)后,是否可以执行一些回调一次.属性非常好地将配置传递给指令.事情是你可以分别观察每个属性,并多次触发回调.

在这个例子中,我们有一个没有隔离范围的指令,它可以观察到两个属性:name和surname.任何更改操作回调触发后:

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);
    }
 }
});

Plunker here.

所以效果是,一次点击后更改名称和姓氏后,动作回调将被触发两次:

name: 
surname: Brown

name: John
surname: Brown

所以问题是:只要改变名称和姓氏值,一次就可以发起动作?

解决方法

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

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

这将在所有$digest循环中运行,如果$watch检测到返回数组(或者您想要构建函数的返回值)与旧值不匹配,则$w​​atch的回调参数将触发.如果您确实使用一个对象作为返回值,请确保为$watch留下最后一个参数的真实值,以便$watch将进行深入比较.

猜你在找的JavaScript相关文章