为什么我得到一个未定义的作用域.ngModel在angularJS指令的link函数中

Why do I get an undefined scope.ngModel on an angularJS directive's link function

本文关键字：ngModel 作用域 angularJS 指令 函数 link 未定义 一个 为什么      更新时间：2023-09-26

我有一个angularJS指令用于屏蔽输入，当满足某个条件时，我想删除掩码。我的瞄准镜出现了错误。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: ""...}

正如你所看到的，在watch中，我的ngModel在第三次迭代中得到了预期的值。

有人能解释一下为什么会这样吗?或者不使用手表如何访问ngModel ?

谢谢!

每当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

相关文章：