javascript - Angularjs 指令

Question

这是我的场景。我正在使用 javascript 动态添加代码块。由于它是动态的，我必须将它绑定(bind)到我的 angularjs 范围，这已经完成了。但我这里有一个问题。其中一个文本框有一个有效的指令。但是，当第一次更改指令文本框以外的任何文本框时，scope.$watch 会触发，稍后则不会。这是我的代码

$('.addNew').click(function(){
    var uniqid = Date.now();
    var html= '';
    html += '<section class="newItem" id="'+uniqid+'">';
    html += '<h4 style="margin: 10px 22px 8px 22px;color:#FF9900;border-bottom:1px dotted black;padding:1%;" > Grocery: <em>{{gName}}</em></h4>';
    html += '<div class="grosinput" style="width:0%;"><a href="#" class="stylish" data-uniqid="'+uniqid+'">-</a></div>';
    html += '<div class="grosinput" style="width:50%;">';
    html += '<lable style="color:#6699CC;font-size: 15px;">Name:</lable><input type="text" placeholder="Enter grocery item" name="name" ng-model="gName"/>';
    html += '</div>';
    html += '<div class="grosinput">';
    html += '<lable style="color:#6699CC;font-size: 15px;">Cost:</lable><input type="text" placeholder="Enter Cost" value="30" name="cost" cost-check ng-model="cost"/></div></section>';
    var $injector = angular.injector(['ng', 'grocery']);
    $injector.invoke(function($rootScope, $compile) {alert('t');
        $('.grocadd').hide().after($compile(html)($rootScope)).fadeIn(1500);
    }); 
});

这是指令

app.directive('costCheck',function($compile,$rootScope){
$rootScope.gName= "What did i buy?";
    return{
        restrict: 'A',
        link: function(scope,element,attrs){


                scope.$watch('cost',function(oldval,newval){alert(attrs.name);
                    if(attrs.name === 'cost'){
                        alert(oldval+'--'+newval);
                    }
                });

        }

    }
});

为什么其他文本框也会触发

Answer 1

请注意，Angular 依赖于脏检查，这意味着它会触发所有 watch 检查是否有脏东西，以便更新 View 。

您应该添加一个 if 条件来检查 newVal 和 oldVal 是否不同，以便继续:

scope.$watch('cost',function(newVal, oldVal){
  if (newVal !== oldVal){
    alert(oldval+'--'+newval);
  }
});

或者您可以使用 attrs.$observe 来观察属性:

我将 DOM 中的指令从 cost-check 更改为 cost-check="{{cost}}" 并替换 $watch 与 $observe 为:

attrs.$observe('costCheck', function(val) {
  console.log(scope.$eval(val));
});

演示:http://jsfiddle.net/HB7LU/3018/