角度指令 - 动态控制器

Question

我被分配了创建一组“卡片”的任务，例如在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/ 。 这应该返回两个警告框，一个代表每个指令控制器。 如果您当前运行此命令，您将在控制台日志中看到它正在尝试搜索具有变量名称而不是变量值的控制器。

请帮忙！！ 这对我们整个仪表板的未来至关重要，一旦我们弄清楚如何传递动态控制器名称，我们将是金色的。 提前致谢！！！

Answer 1

这是如何做到的：

---

在您的指令中，您只需要一个属性，您可以访问该卡的名称： <card-dealer ng-repeat="card in cards" card="card"> </card-dealer>在我的情况下我的卡attribute包含一个具有name属性的card对象。 在指令中，您将隔离范围设置为： 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; }; }], 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和动态控制器。 这是完成此功能的一种非常干净的方式，它是完全独立的。