Angularjs:input [text] ngChange在值发生变化时触发

Question

当值改变时,ngChange正在触发(ngChange与经典的onChange事件不同).如何将经典的onChange事件与angularjs绑定,只有在提交内容时才会触发？

当前绑定:

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

Answer 1

这篇文章展示了一个指令示例,该指令将模型更改延迟到输入,直到模糊事件触发为止.

这是一个小提琴,显示ng-change使用新的ng-model-on-blur指令.请注意,这是对原始小提琴的轻微调整.

如果将指令添加到代码中,则会将绑定更改为:

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

这是指令:

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

注意:正如@wjin在下面的评论中提到的,此功能直接在Angular 1.3(目前处于测试阶段)通过ngModelOptions.有关详细信息,请参阅文档.

Answer 2

这是关于AngularJS的最新补充,作为未来的答案(也是另一个问题).

Angular更新的版本(现在在1.3测试版中),AngularJS本身支持这个选项,使用ngModelOptions像

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

NgModelOptions文档

例:

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

Answer 3

如果其他人正在寻找额外的"输入"按键支持,这里是对Gloppy提供的小提琴的更新

按键绑定代码:

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

Answer 4

对于任何与IE8斗争的人(它不喜欢unbind('input'),我找到了解决方法.

将$ sniffer注入您的指令并使用:

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

如果你这样做,IE8会平静下来:)