Angular.js：數據綁定與指令控制器選項不起作用

爲什麼當我在指令控制器選項中指定控制器時，角度數據綁定不起作用？ $scope.emailInvalid.text通常應映射到type.text但在我的情況下，沒有得到顯示。Angular.js：數據綁定與指令控制器選項不起作用

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通過它，一切工作像預期。

這是plunker。

來源

2015-03-03 dorthrithil

既然你想顯示type.text你需要在指令控制器定義

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

。通過這樣做，您不必將事件傳遞給指令。

PLUNKR

來源

2015-03-03 10:28:51 DonJuwe

在我的情況下，它的對象傳遞到指令是很重要的，因爲會有多種類型在我的應用程序的警報，所有使用相同的標記 - 只是用不同的文字。我想通過將類型定義爲屬性來指定要使用的文本。看到我更新的[plunker]（http://plnkr.co/edit/U4qvd8oK6hGj07A6VvBC?p=preview）。我覺得奇怪的是，在我的示例中，兩個控制器基本上是相同的，但通過使用指令控制器選項在指令內定義一個控制器，使用'scope：{type：'='}'的數據綁定不會工作。 – dorthrithil 2015-03-03 14:50:50

行，我發現一種解決方案：

的問題是，角未能以映射到$scope.emailInvalid$scope.type。我在<alert type="emailInvalid"></alert>的示例中所做的是將一個對象emailInvalid傳遞給該指令。 Angular在我使用指令的範圍模型中尋找這個對象。顯然這個對象不存在，而且角度不能映射任何東西。

我缺少的部分是，我使用指令控制器選項定義的控制器的定義與我在ng-controller中使用的控制器不同。

要解決此問題，我現在傳遞一個字符串而不是對象，並使用開關/大小寫映射警報類型。

plunker

來源

2015-03-04 16:50:16 dorthrithil

Angular.js：數據綁定與指令控制器選項不起作用

回答

相關問題