Angular 指令 - 动态控制器

Question

我被分配了创建一组“卡片”的任务，例如在 Google 和其他类似网站上使用 AngularJS 作为仪表板。每张卡片都具有独立于其他卡片的功能，并且它们都必须在其数据从 API 返回后立即出现。将来，我们将允许将这些卡片固定/取消固定到仪表板，以及由用户自定义的顺序。

我创建了一个“card-dealer”指令，该指令将为卡片对象数组中的每张卡片包含一个 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 Fiddle 来演示我的问题：http://jsfiddle.net/kPdCk/。这应该返回两个警报框，一个代表每个指令控制器。如果您当前运行它，您将在控制台日志中看到它正在尝试使用变量名称而不是变量值来搜索控制器。

请帮忙！！这对我们整个仪表板的未来至关重要，一旦我们弄清楚如何传入动态控制器名称，我们就会很成功。先谢谢了！！！

Answer 1

这是怎么做的：

---

在你的指令中，你只需要一个属性，它可以让你访问卡片的名称：<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 和动态控制器。这是实现此功能的一种非常简洁的方式，而且它是独立的。