背景
我有一个顶级指令,需要由控制器访问。请考虑这个Plunk。
指令
app.directive('topDirective', ['$compile', function($scope){
return {
scope: {},
restrict: 'E',
template: '<h3>Top Directive</h3><p><button ng-click="CallMe()">Click Me</button></p>',
controller: function($scope) {
var self = {};
$scope.CallMe = function(){
alert('Call Me');
};
},
link: function($scope, $elem, $attrs, $ctrl) {
}
};
}]);
需要访问权限的控制器
app.controller('subController', [
'$scope',
function($scope){
var self = {};
$scope.CallDirective = function() {
alert('>>> Replace by call to directive function CallMe (somehow) <<<')
};
}]);
问题
如需更换此行,我需要做什么:
alert('>>> Replace by call to directive function CallMe (somehow) <<<')
通过实际调用指令中的CallMe()函数?
如果不能直接使用,有没有办法在功能上共享指令和控制器都可以使用?我的第一个想法是服务,但它需要在真实场景中进行DOM操作,所以这不是一个选项。
有什么建议吗?
答案 0 :(得分:3)
发出事件
app.controller('subController', [
'$scope','$rootScope',
function($scope,$rootScope){
var self = {};
$scope.CallDirective = function() {
var data ='This is new data';
$rootScope.$emit('callDirective',data);
};
}]);
并且在指令中你可以像
那样做app.directive('topDirective', ['$compile', function($scope){
return {
scope: {},
restrict: 'E',
template: '<h3>Top Directive</h3><p><button ng-click="CallMe()">Click Me</button></p>',
controller: function($scope,$rootScope) {
var self = {};
$scope.CallMe = function(data){
alert(data);
};
$rootScope.$on('callDirective',function(type,data){
$scope.CallMe(data);
});
},
link: function($scope, $elem, $attrs, $ctrl) {
}
};
}]);