javascript – AngularJS指令$watch双向绑定

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS指令$watch双向绑定前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图通过双向数据绑定属性(‘=’)来区分内部更改和外部更改.

换句话说:如果更改是内部的(即在控制器或链接函数中更改了范围变量),我不希望$watch触发该值.

这里有一些代码说明了我的问题:

HTML

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

使用Javascript

@H_502_8@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/

任何想法我能分辨谁?

解决方法

没有选择区分这两个事件,所以你必须自己实现这个行为.

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

例如:

@H_502_8@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 – >模型(外部)和模型 – > DOM(内部)更改.不过,我认为这不是必要的.

猜你在找的JavaScript相关文章