13

通常，每次用户按下键时，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/

4

4 回答 4

20

在这里，我为您创建了 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;
                    });
                }
            });
        }
    };        
});
于 2013-01-23T11:24:29.400 回答
4

另请参阅：AngularJS ngChange 指令。

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

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

于 2013-03-07T16:17:47.567 回答
2

Angularjs: input[text] ngChange 在值发生变化时触发：这个答案提供了一个更好的解决方案，允许自定义指令使用，ngModel因此您仍然可以使用所有其他指令ngModel。

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

于 2014-02-24T20:33:49.907 回答
1

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