angularjs之如何为指令设置动态 Controller _编程设计

谈话很便宜，请先显示我的代码:

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); 
    }, 
}

});

Controller :

function IconsCtrl($scope){ 
  $scope.add = function(){ 
    console.log("add"); 
  }; 
}

现在工作了，当我单击加号图标时，浏览器控制台输出“添加”。

但我想将 Controller 动态设置为指令，如下所示:

HTML:

<div add-icons="IconsOneCtrl"> 
</div> 
<div add-icons="IconsTwoCtrl"> 
</div>

Controller :

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.

Working Demo for Setting Dynamic controller for Directives

HTML标记:

<communicator controller-name="PhoneCtrl" ></communicator> 
<communicator controller-name="LandlineCtrl" ></communicator>

Angular Controller 和指令:

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 "); 
    } 
})

您的情况下，您可以在代码段下面尝试此方法。

Working Demo

HTML标记:

<div add-icons controller-name="IconsOneCtrl"> 
</div> 
<div add-icons controller-name="IconsTwoCtrl"> 
</div>

Angular 代码:

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 "); 
      } 
});