口先だけではダメなので、まずはコードを見せましょう。
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");
};
}
今は動作します。プラスアイコンをクリックすると、ブラウザコンソールに「add」が出力されます。
しかし、次のようにコントローラーをディレクティブに動的に設定したいと思います。
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);
},
}
});
目標を達成するにはどうすればいいでしょうか？ご回答ありがとうございます！
ベストアンサー1
今では、AngularJS でそれが可能になります。ディレクティブでは、controller、nameプロパティ、という 2 つの新しいプロパティを追加するだけで、isolate scopeここでもまさに必要なプロパティです。
指令で注意すべき重要な点
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 コントローラーとディレクティブ:
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コード:
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 ");
}
});