我被分配了创建一组“卡片”的任务，例如在Google和其他类似网站上使用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/。这应该返回两个警告框，一个代表每个指令控制器。如果你当前运行它，你会在控制台日志中看到它正在尝试搜索一个带有变量名称而不是变量值的控制器。
请帮忙!!这对我们整个仪表板的未来至关重要，一旦我们弄清楚如何传递动态控制器名称，我们将是金色的。在此先感谢!!!
答案 0 :(得分：3)
这是如何完成的：
在您的指令中，您只需要一个属性，可以访问卡片的名称：<card-dealer ng-repeat="card in cards" card="card">
</card-dealer>在我的情况下，我的卡片属性包含一个具有name属性的卡片对象。在指令中，您将隔离范围设置为：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为指令创建动态templateUrl和动态控制器。这是完成此功能的一种非常简洁的方式，它是完全独立的。