ng-model的值在自定义指令中未定义

Question

我正在编写一个自定义指令，该指令调用我们在其他地方使用的旧版javascript日期控件。我面临的问题是我发送的ng-model的值始终是不确定的。

该值来自在控制器中执行的$http.get 。 该指令的代码似乎在运行控制器代码之前就已命中，这就是这种情况发生的原因。 我有办法告诉指令仅在控制器初始化后才能运行吗？

app.directive('dateControl', function () {
    return {
        restrict: 'A',
        require: '^ngModel',
        scope: {
            ngModel: '='
        },
        link: function (scope, element, attr) {
            // scope.ngModel is undefined in here
            alert(scope.ngModel);
            addCalControlAngular(attr.id, scope.ngModel, attr.ngModel, attr.id);
        }
    }
});


<td date-Control ng-model="postAward.letterOfAwardDespatchDate" id="letterofaward">

Answer 1

如果指令位于控制器内部，则不会在控制器之前“命中”，但是如果值来自http请求，则在定义模型更新值之前（在有意义的情况下）它是不确定的，以确保在从http接收数据后执行指令你可以用ng-if做个小把戏

<td procon-Date-Control ng-if="postAward.letterOfAwardDespatchDate" ng-model="postAward.letterOfAwardDespatchDate" id="letterofaward">

如果这样做，将仅在ng-if不为null / undefined或表达式为真的情况下呈现指令，即ng-if =“ postAward.letterOfAwardDespatchDate =='yesterday'”

Answer 2

我用链接功能中的$ watch解决了这个问题

link: function (scope, element, attr) {
            debugger;
            // Watch for a value in ngModel and render that value, otherwise give a default
            scope.$watch('ngModel', function (newVal) {
                if (newVal) {
                    addCalControlAngular(attr.id, scope.ngModel, attr.isMandatory, attr.showDefault, attr.ngModel, attr.id);
                } else {
                    addCalControlAngular(attr.id, c_NULL_DATE, attr.isMandatory, attr.showDefault, attr.ngModel, attr.id);
                }
            })            
        }

Answer 3

如果要使用ngModel尝试在链接函数中添加一个参数以添加如下所示的注入：

link: function (scope, element, attr, ngModel)

之后，您可以使用ngModel.$render类的代码，希望对您有所帮助。