AngularJS指令$ watch双向绑定

我试图用双向数据绑定属性（'='）区分内部更改和外部更改。

换句话说：如果更改是内部的（即范围变量在控制器或链接函数中已更改），我不希望$watch触发该值。

这里是一些代码，说明我的问题：

HTML

<div ng-app="myApp">   
    <div ng-controller="MainCtrl"> 
    <input ng-model="value"/> 
    <mydemo value="value"></mydemo> 
    </div> 
</div>

的Javascript

app.directive('mydemo', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     value: "=" 
    }, 
    template: "<div id='mydiv'>Click to change value attribute</div> Value:{{value}}", 

    link: function (scope, elm) 
    {  
     scope.$watch('value', function (newVal) { 
     //Don't listen if the change came from changeValue function 
     //Listen if the change came from input element 
     }); 
     // Otherwise keep any model syncing here. 

     var changeValue = function() 
     { 
     scope.$apply(function() 
     { 
      scope.value = " from changeValue function"; 
     }); 
     } 

     elm.bind('click', changeValue); 
    } 
    } 
})

现场演示： http://jsfiddle.net/B7hT5/11/

任何想法我可以区分谁？

来源

2014-08-28 cheziHoyzer

没有办法区分这两个事件，所以你必须自己实现这个行为。

我会通过设置一个标志来做到这一点，只要你在“内部”进行修改，然后在手表中检查它。

例如：

link: function (scope, elm){  

    var internal = false; 

    scope.$watch('value', function (newVal) { 
    if(internal) return internal = false; 
    // Whatever code you want to run on external change goes here. 
    console.log(newVal); 
    }); 

    var changeValue = function(){ 
    scope.$apply(function(){ 
     internal = true; // flag internal changes 
     scope.value = " from changeValue function";        
    }); 
    } 

    elm.bind('click', changeValue); 
}

见updated fiddle。

您的替代（更复杂）方法是创建一个使用ngModel API的自定义指令。这区分DOM - > Model（外部）和Model - > DOM（内部）更改。不过，我认为这不是必要的。

来源

2014-08-28 16:22:42

谢谢...我认为这个问题有一个简单而优雅的解决方案... – cheziHoyzer 2014-08-28 16:48:09

AngularJS指令$ watch双向绑定

回答

相关问题