javascript - Angular Directive(指令) ngModel 在模糊时发生变化

Question

我正在尝试创建仅在需要的情况下更新真实模型的指令。假设我只想在模糊时更新输入值。我添加了 canChange 变量来检查是否可以更新模型值，并在模糊时将此变量设置为 true。我还想运行名为 myChangeFn 的自定义 viewValue 转换。我不知道为什么 ctrl.$setViewValue(ctrl.$viewValue);如果我添加一些文本并模糊输入，则不会触发我的解析器。我知道我可以使用 ngModelOptions，但在我的情况下它不起作用，因为在某些情况下我想更改其他事件的模型值。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function ($scope) {

}).directive('changeOnBlur', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {},
        link: function (scope, element, attrs, ctrl) {

          var canChange = false;

          ctrl.$parsers.push(function(value){
             var val =  canChange ? myChangeFn(value) : ctrl.$modelValue;
             canChange = false;
             return val;
          });

          function myChangeFn(value) {
            return value + 'my custom data';
          }

          element.on('blur', function() {
            canChange = true;
            ctrl.$setViewValue(ctrl.$viewValue);
          });


        }
    }
});

骗子:https://plnkr.co/edit/qrR6MgW0c6kUx71Hp17A?p=preview

Answer 1

您可能希望将模型作为属性绑定(bind)到指令:

//JavaScript

scope: {
    vm : '='
},

//HTML

<input ng-model="time" change-on-blur vm="time" />

现在您可以在指令中以 scope.vm 的形式访问模型并按照您想要的方式操作它。

我知道这不是您正在寻找的解决方案，但它可能会让您走上找到它的正确道路。