AngularJS директива $ watch двусторонняя привязка

Question

Я пытаюсь различать внутреннее изменение и внешнее изменение с двухсторонним атрибутом привязки данных ('=').

Другими словами: я не хочу, чтобы $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/

Любая идея, кого я могу отличить?

Answer 1

Невозможно провести различие между этими двумя событиями, поэтому вам придется реализовать это поведение самостоятельно.

Я бы сделал это, установив флаг, когда вы делаете изменение «внутренне», а затем проверяете его на часах.

Например:

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.

Ваш альтернативный (более сложный) подход создает пользовательскую директиву, которая использует API ngModel. Это отличает изменения DOM -> Model (внешний) и Model -> DOM (внутренние). Я не думаю, что это необходимо здесь.