I am currently working on differentiating between internal changes and external changes using a two-way data-bound attribute ('=').
To clarify: I want to prevent $watch from triggering if the change was made internally (such as altering the scope variable in the controller or link function).
Here is some code that highlights my issue:
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) {
//Ignore changes from the changeValue function
//Listen for changes from the input element
});
// Implement any model syncing here.
var changeValue = function()
{
scope.$apply(function ()
{
scope.value = " from changeValue function";
});
}
elm.bind('click', changeValue);
}
}
})
Live demo: http://jsfiddle.net/B7hT5/11/
Any suggestions on how I can make this distinction?