为什么我在 angularJS 指令的链接函数上得到未定义的 scope.ngModel

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 获得了第三次迭代的预期值。

有人能解释一下为什么会这样吗？或者如何在不使用手表的情况下访问 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。