Question

我有一个用于屏蔽输入的angularJS指令，当满足某个条件时，我想删除屏蔽。我在代码中未定义scope.ngModel时遇到错误，但是当我执行console.log（scope.ngModel）时，我得到了一个值。我决定放入手表，令人惊讶的是，在获得实际模型值之前，ngModel似乎经历了几次分配迭代。

这是我的指令代码：

    angular.module('app').directive('maskedtext', function () {
    return {
        restrict: 'E',
        scope: {
            field: '=',
            ngModel: '=',
            miscTables: '='
        },
        require: 'ngModel',
        templateUrl: 'app/templates/maskedInputTemplate.html',
        link: function (scope, element, attrs, ctrl) {
            var strfld = scope.field.UseMaskField;
            var searchvals = scope.field.UseMaskValues;
            console.log(scope.ngModel); //***LINE 20***
            if (strfld != null && searchvals != null) {
                scope.$watch('ngModel', function (newVal, oldVal) {
                    console.log(scope.ngModel); //***LINE 23***
                    if (newVal != oldVal) {
                        var dbval = newVal[strfld];
                        var arrvals = searchvals.split(",");
                        var i = arrvals.indexOf(dbval);
                        if (i < 0) {
                            attrs["ui-mask"] = "";
                        }
                    }
                });
            }
        }
    };
});

控制台结果是：

LINE 20: undefined
LINE 23: undefined
LINE 23: undefined
LINE 23: Object {Guest_no: 82000001, Parent_no: 82000001, Salute: "", Suffix: ""...}

如您所见，在监视中我的ngModel获得了第3次迭代所期望的值。

有人可以解释为什么会这样吗？或者如何在不使用手表的情况下访问ngModel？

谢谢！

Answer 1

每当Angular运行摘要时，它将多次执行$watch事件。这就是为什么你看到它运行了这么多次。忽略不相关事件的最佳方法是比较newVal和oldVal：

scope.$watch('ngModel', function (newVal, oldVal) {
    if (newVal == undefined || angular.equals(newVal, oldVal)) return;

    // ... if values are different, process the $watch event ...
}

但是，要真正解决您的问题，您可以忽略$watch，只是以不同的方式访问ng-model：

if (attrs.ngModel) {
    var MyModel = scope[attrs.ngModel];
}

使用MyModel访问您的ng-model。

为什么我在angularJS指令的链接函数

1 个答案: