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

问题描述

话不多说，先展示我的代码:

HTML:

指令:

angular.module('attrDirective',[]).directive('addIcons', function($compile){返回 {限制:'A'，控制器:IconsCtrl"},链接:函数(范围，元素，属性，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("添加");};}

现在它可以工作了，当我点击加号图标时，浏览器控制台输出添加".

但我想动态地将控制器设置到指令中，如下所示:

HTML:

<div add-icons="IconsTwoCtrl">

控制器:

function IconsOneCtrl($scope){$scope.add = function(){console.log("IconsOne 添加");};}功能 IconsTwoCtrl($scope){$scope.add = function(){console.log("IconsTwo 添加");}}

指令喜欢:

angular.module('attrDirective',[]).directive('addIcons', function($compile){返回 {限制:'A'，控制器:动态设置，取决于 attrs.addIcons},链接:函数(范围，元素，属性，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:{},//隔离作用域控制器 : "@",//@ 符号name:"controllerName",//控制器名称属性指向控制器.

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

HTML 标记:

Angular 控制器和指令:

var app = angular.module('myApp',[]).指令('通信器'，函数(){返回 {限制:'E'，范围:{}，控制器 : "@"，名称:控制器名称"，模板:"<input type='text' ng-model='message'/<input type='button' value='Send Message' ng-click='sendMsg()'><br/>"}}).控制器(PhoneCtrl"，函数($scope){$scope.sendMsg = function(){alert( $scope.message + " : 通过 Phone Ctrl 发送消息");}}).控制器(LandlineCtrl"，函数($scope){$scope.sendMsg = function(){alert( $scope.message + " : 通过 Land Line Ctrl 发送消息 ");}})

你的情况你可以试试下面的代码片段.

工作演示

HTML 标记:

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

角度代码:

angular.module('myApp',[]).指令('添加图标'，功能(){返回 {限制:'A'，范围:{}，控制器 : "@"，名称:控制器名称"，模板:'<input type="button" value="(+) plus" ng-click="add()">'}}).控制器(IconsOneCtrl"，函数($scope){$scope.add = function(){alert("IconsOne 添加");}}).控制器(IconsTwoCtrl"，函数($scope){$scope.add = function(){alert("图标两个添加");}});

Talk is cheap, show my codes first:

HTML:

<div add-icons="IconsCtrl">
</div>

directive:

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

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>

Controller:

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

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

directive likes :

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!

解决方案

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.

Important to note in directive

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

Working Demo for Setting Dynamic controller for Directives

HTML Markup :

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

Your case you can try this below code snippets.

Working Demo

HTML Markup :

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

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