角度指令ngModel改变模糊

时间:2016-02-24 16:52:47

标签: javascript angularjs

我正在尝试创建仅在需要的情况下更新真实模型的指令。假设我想仅在模糊时更新输入值。我添加了canChange变量来检查我是否可以更新模型值,并在blur上将此变量设置为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);
          });


        }
    }
});

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

1 个答案:

答案 0 :(得分:1)

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

// JavaScript的

scope: {
    vm : '='
},

// HTML

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

现在,您可以访问模型并在指令中以scope.vm的形式操作它。

我知道这不是您正在寻找的解决方案,但它可能会让您找到找到它的正确途径。