Làm thế nào để tạo chỉ thị thay đổi cho AngularJS?

Question

thường cập nhật ng mô hình ràng buộc mô hình mỗi người dùng thời gian đẩy phím:

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

này hoạt động tuyệt vời trong hầu hết mọi trường hợp.

Nhưng tôi cần nó cập nhật khi sự kiện thay đổi xảy ra thay vào đó khi sự kiện onkeyup/onkeydown.

Trong các phiên bản cũ hơn của góc có một lệnh ng-model-instant hoạt động giống như ng-model hoạt động ngay bây giờ (ít nhất là cho người dùng - tôi không biết gì về việc triển khai của chúng). Vì vậy, trong phiên bản cũ hơn nếu tôi chỉ cung cấp cho ng-mô hình nó đã được cập nhật onchange mô hình và khi tôi chỉ định ng-mô hình ngay lập tức nó đã được cập nhật các mô hình onkeypup.

Bây giờ tôi cần ng-model để sử dụng cho sự kiện "thay đổi" của phần tử. Tôi không muốn nó được ngay lập tức. Cách đơn giản nhất để làm việc này là gì?

EDIT

Các đầu vào vẫn phải phản ánh bất kỳ thay đổi khác với mô hình - nếu mô hình sẽ được cập nhật ở vị trí khác, giá trị của đầu vào nên phản ánh sự thay đổi này.

Điều tôi cần là có chỉ thị ng-model hoạt động giống như nó hoạt động trong các phiên bản cũ của angularj.

Dưới đây là một lời giải thích về những gì tôi đang cố gắng để làm: http://jsfiddle.net/selbh/EPNRd/

Answer 1

Ở đây tôi đã tạo onChange chỉ thị cho bạn. Demo: 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

Tôi không chắc chắn nếu có một cách tốt hơn để làm điều này, nhưng bạn có thể đạt được điều này bằng cách sử dụng chỉ thị tùy chỉnh (trên bất kỳ sự kiện jquery bạn muốn)

<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

Xem thêm: chỉ thị AngularJS ngChange.

Khi áp dụng cho một đầu vào < > các thay đổi xảy ra sau mỗi lần nhấn phím không phải trên sự kiện mờ.

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

Answer 4

Angularjs: input[text] ngChange fires while the value is changing: Câu trả lời này cung cấp một giải pháp tốt hơn cho phép các chỉ thị tùy chỉnh để làm việc với ngModel vì vậy bạn vẫn có thể sử dụng tất cả các chỉ thị khác mà đi cùng với ngModel.

Ngoài ra, một giải pháp linh hoạt hơn thậm chí cho phép để xác định sự kiện để sử dụng (không chỉ làm mờ) và các tài sản khác phải được tích hợp sẵn trong góc rất sớm: https://github.com/angular/angular.js/pull/2129