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類的代碼，希望對您有所幫助。