Angularjs: input [text] ngChange kích hoạt khi giá trị đang thay đổi

ngChange đang kích hoạt trong khi giá trị đang thay đổi (ngChange không giống với sự kiện onChange cổ điển). Làm cách nào để liên kết sự kiện onChange cổ điển với anglejs, sự kiện sẽ chỉ kích hoạt khi nội dung được cam kết?

Ràng buộc hiện tại:

<input type="text" ng-model="name" ng-change="update()" />

Bài đăng này cho thấy một ví dụ về chỉ thị trì hoãn việc thay đổi mô hình thành đầu vào cho đến khi sự kiện mờ kích hoạt.

Đây là một thao tác hiển thị cho thấy ng-change hoạt động với chỉ thị ng-model-on-fade mới. Lưu ý rằng đây là một chỉnh sửa nhỏ cho fiddle ban đầu .

Nếu bạn thêm chỉ thị vào mã của mình, bạn sẽ thay đổi ràng buộc của mình với điều này:

<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />

Đây là chỉ thị:

// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});

Lưu ý: như @wjin đã đề cập trong các nhận xét bên dưới, tính năng này được hỗ trợ trực tiếp trong Angular 1.3 (hiện đang trong giai đoạn thử nghiệm) thông qua ngModelOptions. Xem tài liệu để biết thêm thông tin.

Đây là về các bổ sung gần đây cho AngularJS, để phục vụ như câu trả lời trong tương lai (cũng cho một câu hỏi khác ).

Angular phiên bản mới hơn (bây giờ là 1.3 beta), AngularJS nguyên bản hỗ trợ tùy chọn này, sử dụng ngModelOptions, như

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

Tài liệu NgModelOptions

Thí dụ:

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

Trong trường hợp bất kỳ ai khác đang tìm kiếm hỗ trợ nhấn phím "enter" bổ sung, đây là bản cập nhật cho fiddle do Gloppy cung cấp

Mã cho liên kết nhấn phím:

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});

Đối với bất kỳ ai đang gặp khó khăn với IE8 (nó không thích unbind ('đầu vào'), tôi đã tìm ra cách giải quyết vấn đề này.

Chèn $ sniper vào chỉ thị của bạn và sử dụng:

if($sniffer.hasEvent('input')){
    elm.unbind('input');
}

IE8 bình tĩnh lại nếu bạn làm điều này :)

Theo hiểu biết của tôi, chúng ta nên sử dụng ng-change với tùy chọn select và trong trường hợp hộp văn bản, chúng ta nên sử dụng ng-blur.

Sử dụng $ scope. $ Watch để phản ánh những thay đổi của biến scope tốt hơn sao?

Ghi đè hành vi onChange đầu vào mặc định (chỉ gọi hàm khi điều khiển mất tiêu điểm và giá trị thay đổi)

LƯU Ý: ngChange không tương tự như sự kiện onChange cổ điển, nó kích hoạt sự kiện trong khi giá trị đang thay đổi Chỉ thị này lưu trữ giá trị của phần tử khi nó lấy tiêu điểm. Làm
mờ nó kiểm tra xem giá trị mới có thay đổi không và nếu có thì nó kích hoạt sự kiện

@param {String} - tên hàm sẽ được gọi khi "onChange" được kích hoạt

@example <input my-on-change = "myFunc" ng-model = "model">

angular.module('app', []).directive('myOnChange', function () { 
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            myOnChange: '='
        },
        link: function (scope, elm, attr) {
            if (attr.type === 'radio' || attr.type === 'checkbox') {
                return;
            }
            // store value when get focus
            elm.bind('focus', function () {
                scope.value = elm.val();

            });

            // execute the event when loose focus and value was change
            elm.bind('blur', function () {
                var currentValue = elm.val();
                if (scope.value !== currentValue) {
                    if (scope.myOnChange) {
                        scope.myOnChange();
                    }
                }
            });
        }
    };
});

Tôi đã gặp chính xác cùng một vấn đề và điều này đã làm việc cho tôi. Thêm ng-model-updatevà ng-keyupbạn đã sẵn sàng! Đây là tài liệu

 <input type="text" name="userName"
         ng-model="user.name"
         ng-change="update()"
         ng-model-options="{ updateOn: 'blur' }"
         ng-keyup="cancel($event)" />