AngularJS chỉ thị $ xem hai chiều ràng buộc

Question

Tôi đang cố gắng phân biệt giữa thay đổi nội bộ và thay đổi bên ngoài với thuộc tính ràng buộc dữ liệu hai chiều ('=').

Nói cách khác: Tôi không muốn $watch kích hoạt giá trị nếu thay đổi là nội bộ (tức là biến phạm vi đã được thay đổi trong bộ điều khiển hoặc trong hàm liên kết).

Dưới đây một số mã để minh họa vấn đề của tôi:

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

Live Demo: http://jsfiddle.net/B7hT5/11/

Bất kỳ ý tưởng nào tôi có thể phân biệt?

Answer 1

Không có tùy chọn để phân biệt giữa hai sự kiện này, do đó bạn sẽ phải tự thực hiện hành vi đó.

Tôi sẽ làm điều đó bằng cách đặt cờ bất cứ khi nào bạn thực hiện thay đổi "nội bộ", sau đó kiểm tra nó trong đồng hồ.

Ví dụ:

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

Xem updated fiddle.

Cách tiếp cận thay thế (phức tạp hơn) của bạn, là tạo chỉ thị tùy chỉnh sử dụng API ngModel. Điều đó phân biệt giữa DOM -> Model (external) và Model -> DOM (internal) thay đổi. Tôi không nghĩ rằng nó là cần thiết ở đây, mặc dù.