如何设置指令的dynamic控制器？
谈话很便宜，首先显示我的代码：
HTML：
<div add-icons="IconsCtrl"> </div> 指示：
angular.module('attrDirective',[]).directive('addIcons', function($compile){ return { restrict : 'A', controller : "IconsCtrl" }, link : function (scope, elem , attrs, ctrl) { var parentElem = $(elem); var icons = $compile("<i class='icon-plus' ng-click='add()'></i>)(scope); parentElem.find(".accordion-heading").append(icons); }, }
}）;
控制器：
function IconsCtrl($scope){ $scope.add = function(){ console.log("add"); }; }
现在它工作，当我点击加号图标，浏览器控制台输出“添加”。
但我想dynamic地将控制器设置为指令，如下所示：
HTML：
<div add-icons="IconsOneCtrl"> </div> <div add-icons="IconsTwoCtrl"> </div>
控制器：
function IconsOneCtrl($scope){ $scope.add = function(){ console.log("IconsOne add"); }; } function IconsTwoCtrl($scope){ $scope.add = function(){ console.log("IconsTwo add"); } }
指令喜欢：
angular.module('attrDirective',[]).directive('addIcons', function($compile){ return { restrict : 'A', controller : dynamic set,depends on attrs.addIcons }, link : function (scope, elem , attrs, ctrl) { var parentElem = $(elem); var icons = $compile("<i class='icon-plus' ng-click='add()'></i>)(scope); parentElem.find(".accordion-heading").append(icons); }, } });
如何实现我的目标？ 感谢您的回答！
现在可以用AngularJS。 在指令中，您只需添加两个名为controller ， name属性的新属性，而isolate scope在这里也是完全需要的。
在指令中需要注意的地方
scope:{}, //isolate scope controller : "@", // @ symbol name:"controllerName", // controller names property points to controller.
为指令设置dynamic控制器的工作演示
HTML标记：
<communicator controller-name="PhoneCtrl" ></communicator> <communicator controller-name="LandlineCtrl" ></communicator>
Angular Controller和Directive：
var app = angular.module('myApp',[]). directive('communicator', function(){ return { restrict : 'E', scope:{}, controller : "@", name:"controllerName", template:"<input type='text' ng-model='message'/><input type='button' value='Send Message' ng-click='sendMsg()'><br/>" } }). controller("PhoneCtrl",function($scope){ $scope.sendMsg = function(){ alert( $scope.message + " : sending message via Phone Ctrl"); } }). controller("LandlineCtrl",function($scope){ $scope.sendMsg = function(){ alert( $scope.message + " : sending message via Land Line Ctrl "); } })
你的情况你可以试试下面的代码片段。
工作演示
HTML标记：
<div add-icons controller-name="IconsOneCtrl"> </div> <div add-icons controller-name="IconsTwoCtrl"> </div>
Angular Code：
angular.module('myApp',[]). directive('addIcons', function(){ return { restrict : 'A', scope:{}, controller : "@", name:"controllerName", template:'<input type="button" value="(+) plus" ng-click="add()">' } }). controller("IconsOneCtrl",function($scope){ $scope.add = function(){ alert("IconsOne add "); } }). controller("IconsTwoCtrl",function($scope){ $scope.add = function(){ alert("IconsTwo add "); } });
这是如何完成的：
在你的指令元素中，你所需要的只是一个属性，它允许你访问控制器的名字：在我的情况下，我的卡属性持有一个名称属性的卡对象。 在该指令中，您将隔离范围设置为：
scope: { card: '=' }
这将卡对象隔离并插入到指令范围。 然后您将指令模板设置为：
template: '' ，
这看起来指令的控制器为一个名为getTemplateUrl的函数，并允许您dynamic设置templateUrl 。 在指令控制器中， getTemplateUrl函数如下所示：
controller: ['$scope', '$attrs', function ($scope, $attrs) { $scope.getTemplateUrl = function () { return '/View/Card?cardName=' + $scope.card.name; }; }],
我有一个mvc控制器，连接正确的.cshtml文件，并处理这条路线被击中时的安全性，但是这也可以使用常规的angular度路线。 在.cshtml / html文件中，您只需将其设置为根元素即可设置您的dynamic控制器。 每个模板的控制器都会有所不同。 这创build了一个控制器的层次结构，它允许您将所有卡片的附加逻辑应用于所有卡片，然后将特定的逻辑应用于各个卡片。 我仍然需要弄清楚我将如何处理我的服务，但是这种方法允许您使用基于控制器名称的ng-repeat来为指令创build一个dynamic的templateUrl和dynamic控制器。 这是完成这个function的一个非常干净的方式，它是完全独立的。
1-你不需要使用： var parentElem = $(elem); as elem is a jquery element. This is similar to: $($('#myid')) var parentElem = $(elem); as elem is a jquery element. This is similar to: $($('#myid'))
2-不能dynamic分配控制器，因为在预链接阶段之前，指令控制器被实例化。
指令控制器可以访问attrs，因此您可以根据attrs['addIcons']的值dynamicselect内部函数（控制器内部的函数）
PS。 注意attrs['addIcons']是骆驼的命名。
