Angular Directive - 動態控制器

Question

我已經被分配了創建一套「卡」的任務，就像在谷歌和其他類似的網站上使用AngularJS作爲儀表板一樣。每張卡都有獨立的功能，並且只要數據從API返回，它們都必須立即出現。將來，我們將允許將這些卡片固定/取消固定到儀表板，以及由用戶訂購。

我已經創建了一個「卡片經銷商」指令，該指令將包含卡片對象數組中的每張卡片的ng-repeat。每張卡都需要有自己的動態模板和控制器，這是我遇到問題的地方。我能夠弄清楚如何通過一個動態的templateUrl，但控制器是一個不同的故事。我已經完全想通弄明白了，通過模仿什麼，我看了一個Pluralsight視頻，我應該只能夠到card.controller變量傳遞到指令「CTRL」屬性是這樣的：

<card-dealer ng-repeat="card in cards" card="card" ctrl="{{card.controller}}"/> 

然而，ctrl='{{card.controller}}'變量在指令發送到指令之前不會被解析。在指令中，我通過設置controller: '@'和name: 'ctrl'來動態設置控制器。這將查找名爲「ctrl」的屬性的元素，並將其值作爲控制器的名稱返回。當我輸入指令控制器的字符串名稱而不是使用{{card.controller}}變量時，此方法起作用，但僅輸入字符串不是動態的。

我需要在達到指令前解析變量，以便它查找正確的控制器名稱。我創建了JS小提琴來演示我的問題：http://jsfiddle.net/kPdCk/。這應該返回兩個警報框，一個代表每個指令控制器。如果你現在運行它，你會在控制檯日誌中看到它正在嘗試搜索一個帶有變量名稱而不是變量值的控制器。

請幫忙!!這對我們整個儀表板的未來至關重要，一旦我們弄清楚如何傳遞動態控制器名稱，我們將是一個黃金。提前致謝！！！

Answer 1

這是它是如何做：

---

內，您的指令，所有你需要的是一個允許您訪問該卡的名稱的屬性：<card-dealer ng-repeat="card in cards" card="card"> </card-dealer>在我的情況，我的卡屬性包含卡對象，有一個名稱屬性。在指令中，您將隔離範圍設置爲：scope: { card: '=' }這會將卡對象隔離並插值到指令作用域。然後，您將指令模板設置爲：template: '<div ng-include="getTemplateUrl()"></div>'，這會查找指令的控制器中的名爲getTemplateUrl的函數。這是你想要的，因爲指令控制器可以訪問範圍對象。在指令控制器getTemplateUrl功能如下：controller: ['$scope', '$attrs', function ($scope, $attrs) { $scope.getTemplateUrl = function() { return '/View/Card?cardName=' + $scope.card.name; }; }],

---

我有一個MVC控制器，它連接了正確的.cshtml文件，當這條路被擊中處理安全，但是這將有規則的角度路線工作以及。在.cshtml文件中，您只需將<div ng-controller="CardContactController"></div>作爲根元素來設置動態控制器。每張卡都有不同的控制器。這創建了一個控制器層次結構，允許您將所有卡片的附加邏輯應用於一般情況，然後對每張卡片應用特定的邏輯。我仍然需要弄清楚我將如何處理我的服務，但是這種方法允許您僅使用基於卡名稱的ng-repeat爲指令創建動態模板UI和動態控制器。這是完成這個功能的一個非常乾淨的方式，它是完全獨立的。