如何爲AngularJS創建on-change指令？

Question

勢必每次用戶模型通常NG-模型更新推動關鍵：

<input type="text" ng-model="entity.value" /> 

這在幾乎所有情況下的偉大工程。

但我需要它來更新onchangeup事件發生時，而不是onkeyup/onkeydown事件。

在較舊版本的angular中，有一個ng-model-instant指令，它與ng-model現在的工作方式相同（至少對於用戶而言 - 我對它們的實現一無所知）。 因此，在舊版本中，如果我只是給ng模型，它正在更新模型onchange，並且當我指定ng模型時，它即將更新模型onkeypup。

現在我需要ng-model在元素的「change」事件上使用。我不希望它是瞬間的。做這件事最簡單的方法是什麼？

編輯

輸入仍然反映其他任何更改模型 - 如果模型將在其他地方進行更新，輸入的值應反映這種變化。

我需要的是讓ng-model指令工作，就像在angularjs的舊版本中工作一樣。

這裏是什麼，我試圖做一個解釋： http://jsfiddle.net/selbh/EPNRd/

Answer 1

在這裏，我爲你創建onChange指令。 演示：http://jsfiddle.net/sunnycpp/TZnj2/52/

app.directive('onChange', function() {  
    return { 
     restrict: 'A', 
     scope:{'onChange':'=' }, 
     link: function(scope, elm, attrs) { 
      scope.$watch('onChange', function(nVal) { elm.val(nVal); });    
      elm.bind('blur', function() { 
       var currentValue = elm.val(); 
       if(scope.onChange !== currentValue) { 
        scope.$apply(function() { 
         scope.onChange = currentValue; 
        }); 
       } 
      }); 
     } 
    };   
}); 

Answer 2

我不知道是否有更好的方式來做到這一點，但你可以使用自定義指令實現這一目標（在任何jQuery的事件你想要的）

<input type="text" ng-model="foo" custom-event="bar" /> 
<p> {{ bar }} </p> 

// create the custom directive 

app.directive('customEvent', function() { 
    return function(scope, element, attrs) { 
     var dest = attrs.customEvent; 

     $(element[0]).on('any-jquery-event', function(e) { 
      e.preventDefault(); 

      // on the event, copy the contents of model 
      // to the destination variable 
      scope[dest] = scope.foo; 

      if (!scope.$$phase) 
       scope.$apply(); 
     }); 
    } 
}); 

Answer 3

參見：AngularJS ngChange指令。

當應用於<輸入>時，更改發生在每次按鍵不在模糊事件之後。

http://docs.angularjs.org/api/ng.directive:ngChange

Answer 4

Angularjs: input[text] ngChange fires while the value is changing：這個答案提供了一個更好的解決方案，允許自定義指令來工作，所以ngModel你仍然可以使用所有以ngModel走其他指令。

此外，一個更加靈活的解決方案，允許你指定事件使用（不只是模糊）等性質應以角很快建成：https://github.com/angular/angular.js/pull/2129