Question

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

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

几乎在所有情况下，这都很有效。

但是当onchangeup / onkeydown事件发生时，我需要更新onchange事件。

在旧版角度中，有一个ng-model-instant指令，它与ng-model现在的工作方式相同（至少对于用户来说 - 我对他们的实现一无所知）。所以在旧版本中，如果我刚刚给出了ng-model，它就是在更新上更新模型，当我指定ng-model-instant时，它正在更新模型onkeypup。

现在我需要使用ng-model进行＆＃34;更改＆＃34;元素的事件。我不希望它是即时的。最简单的方法是什么？

修改

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

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

当应用于＆lt; input＆gt;时每次按键后都不会出现模糊事件。

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

Answer 3

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

此外，一个更灵活的解决方案，允许指定要使用的事件（不仅仅是模糊）和其他属性应该很快内置到角度：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();
        });
    }
});

如何为AngularJS创建变更指令？

4 个答案: