如何为 AngularJS 创建 on-change 指令？

Question

通常 ng-model 会在用户每次按键时更新绑定模型：

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

这几乎适用于所有情况。

但我需要在 onchange 事件发生而不是 onkeyup/onkeydown 事件时更新它。

在旧版本的 Angular 中，有一个 ng-model-instant 指令，其工作方式与现在的 ng-model 相同（至少对于用户而言——我对他们的实现一无所知）。 所以在旧版本中，如果我只是给了 ng-model，它会更新模型 onchange，而当我指定 ng-model-instant 时，它会更新模型 onkeypup。

现在我需要 ng-model 用于元素的“更改”事件。我不希望它是即时的。最简单的方法是什么？

编辑

输入仍然必须反映模型的任何其他更改 - 如果模型将在其他地方更新，则输入的值应反映此更改。

我需要的是让 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

另请参阅：AngularJS ngChange 指令。

当应用于 时，更改发生在每次按键后，而不是模糊事件。

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

Answer 3

Angularjs: input[text] ngChange fires while the value is changing ：这个答案提供了一个更好的解决方案，允许自定义指令与 ngModel 一起使用，因此您仍然可以使用与 ngModel 一起使用的所有其他指令。

此外，一个更灵活的解决方案，允许指定要使用的事件（不仅仅是模糊）和其他属性应该很快内置到角度：https://github.com/angular/angular.js/pull/2129

Answer 4

我不确定是否有更好的方法来做到这一点，但您可以使用自定义指令来实现这一点（在您想要的任何 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();
        });
    }
});