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

app.directive（'mydemo'，function（）{
返回{
限制：'E'，
范围：{
值：“=”
},
模板：“单击以更改值属性值：{{value}}”，
链接：功能（范围，elm）
{      
范围$watch（'value'，函数（newVal）{
//如果更改来自changeValue函数，则不要侦听
//听一听变化是否来自输入元素
});
//否则，请保持任何模型在此同步。
var changeValue=函数（）
{
作用域：$apply（函数（）
{
scope.value=“来自changeValue函数”；
});
}
elm.bind（'click'，changeValue）；
}
}
})

现场演示：

---

你知道我能认出谁吗

没有选项来区分这两个事件，因此您必须自己实现该行为

我会在你“内部”进行更改时设置一个标志，然后在手表中检查它

例如：

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

看

您的另一种（更复杂的）方法是创建一个使用

ngModel

API的自定义指令。这区分了DOM->Model（外部）和Model->DOM（内部）更改。不过，我认为这里没有必要