Angular.js：數據綁定不適用於指令控制器選項

Question

當我在指令controller選項中指定控制器時，為什么angular的數據綁定不起作用？ $scope.emailInvalid.text通常應該映射到type.text但是在我的情況下，什么也沒有顯示。

JS：

.directive('alert', function () {
    return {
        template: '<div>{{type.text}}</div>',
        restrict: 'E',
        scope: {
            type: '='
        },
        controller: function ($scope) {
            $scope.emailInvalid = {
                text: 'Text Alert Two'
            };
        }
    };
});

HTML：

<alert type="emailInvalid"></alert>

當我定義一個單獨的控制器並將其與ng-controller一起傳遞到HTML中時，一切都會按預期進行。

這是一個矮人 。

Answer 1

由於要顯示type.text ，因此需要定義

$scope.type = {
    text: 'Text Alert Two'
};

在您的指令控制器中 。 這樣一來，您不必將對象傳遞給指令 。

普倫克

Answer 2

好的，我找到了解決方案：

問題是， $scope.emailInvalid無法將$scope.emailInvalid映射到$scope.type 。 在我的示例中，使用<alert type="emailInvalid"></alert>所做的事情是將對象emailInvalid傳遞給指令。 Angular在我使用指令的范圍模型中尋找此對象。 顯然，該對象不存在，角度無法映射任何內容。

我缺少的部分是， 我用指令controller選項定義的控制器的定義范圍不同於與ng-controller一起使用ng-controller 。

要變通解決此問題，我現在傳遞一個字符串而不是一個對象，並使用switch / case映射警報類型。

矮人