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

一尘不染

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

angularjs

通常，每次用户按下键时，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在元素的“ change”事件上使用。我不希望它是即时的。最简单的方法是什么？

编辑

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

我需要的是让ng-model指令可以像在angularjs的旧版本中一样工作。

这是我要做什么的解释：http :
//jsfiddle.net/selbh/EPNRd/

阅读 230

2020-07-04

共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;
                    });
                }
            });
        }
    };        
});

2020-07-04