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不是空/未定义或表达式是真实的，即ng-if =“postAward.letterOfAwardDespatchDate =='昨'”

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等代码，希望对您有所帮助。

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

3 个答案: