如何设置指令动态控制器？ [英] How to set the dynamic controller for directives?

问题描述

谈话是便宜，显示我的$ C $瑞士信贷第一：

Talk is cheap, show my codes first:

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

现在它的工作原理，当我点击加号图标，浏览器控制台输出增加。

now it works, when i click the plus icon, browser console output "add".

但我想动态设置控制器进入指令，像这样的：

but i want to set the controller into the directive dynamically,like this:

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

如何实现我的目标？感谢您的回答！

how to achieve my goal? thanks for your answer!

推荐答案

现在有可能用AngularJS。在指令你只是添加了两个所谓的新特性
也正是需要控制器，名称属性，并且还分离范围在这里。

Now it is possible with AngularJS. In directive you just add two new property called controller , name property and also isolate scope is exactly needed here.

中的重要指示要注意

scope:{}, //isolate scope
controller : "@", // @ symbol
name:"controllerName", // controller names property points to controller.

工作演示为指令设置动态控制器

HTML标记：

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

角控制器和指令：

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

您情况下，你可以试试这个下面code片段。

Your case you can try this below code snippets.

工作演示

HTML标记：

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

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

这篇关于如何设置指令动态控制器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！