[英]How to call AngularJS directive function to another controller?
custom.js custom.js
function config($stateProvider){
$stateProvider
.state('test_page', {
abstract: true,
url: "/test-page",
controller: "testController"
templateUrl: "test.html",
});
}
function testController($scope){
$scope.edit= function(){
alert("You have clicked edit icon");
}
}
function anotherController($scope){
$scope.copy = function(){
alert("Holla... You have clicked copy icon");
}
}
function iboxTools($timeout) {
return {
restrict: 'A',
scope: true,
templateUrl: 'views/common/ibox_tools.html',
controller: function($scope, $element) {
// Function for collapse ibox
$scope.showhide = function() {
var ibox = $element.closest('div.ibox');
var icon = $element.find('i:first');
var content = ibox.find('div.ibox-content');
content.slideToggle(200);
// Toggle icon from up to down
icon.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
ibox.toggleClass('').toggleClass('border-bottom');
$timeout(function() {
ibox.resize();
ibox.find('[id^=map-]').resize();
}, 50);
};
// Function for close ibox
$scope.closebox = function() {
var ibox = $element.closest('div.ibox');
ibox.remove();
};
}
};
}
angular
.module('myModule')
.config(config)
.controller('testController', testController)
.controller('anotherController', anotherController)
.directive('iboxTools', iboxTools)
test.html test.html
<div ibox-tools></div>
/*more html */
ibox_tools.html ibox_tools.html
<div class="ibox-tools" uib-dropdown>
<a ng-click="showhide()"> <i class="fa fa-chevron-up"></i></a>
<a ng-click="copy()">
<i class="fa fa-file"></i>
</a>
<a ng-click="edit()">
<i class="fa fa-pencil"></i>
</a>
<a ng-click="closebox()"><i class="fa fa-times"></i></a>
</div>
Above I have posted my code. 以上,我已经发布了我的代码。 Here directive template
copy()
function not working because I have written showhide()
and closebox()
functions within the directive controller, edit()
function in my current page testController
and last copy()
function written anotherController
这里的指令模板
copy()
函数不起作用,因为我已经在指令控制器中编写了showhide()
和closebox()
函数,在当前页面的testController
编写了edit()
函数,最后编写了anotherController
copy()
函数
Please check above my code. 请检查我的代码上方。 Why not calling
anotherController
copy()
function in my current page controller? 为什么不在当前页面控制器中调用
anotherController
copy()
函数?
Sorry for my bad English :( 对不起,我的英语不好 :(
You can't call the function simply in another controller if it is not related to your directive/controller. 如果与指令/控制器无关,则不能简单地在另一个控制器中调用该函数。 So to achieve this you can declare it as $rootScope function instead of $scope or use events.
因此,为实现此目的,您可以将其声明为$ rootScope函数而不是$ scope或使用事件。
function testController($rootScope){
$rootScope.edit= function(){
alert("You have clicked edit icon");
}
}
function anotherController($rootScope){
$rootScope.copy = function(){
alert("Holla... You have clicked copy icon");
}
}
Using $rootScope everytime is not good but in some cases you can proceed. 每次都使用$ rootScope不好,但是在某些情况下您可以继续进行。
Or we can use events 或者我们可以使用事件
function anotherController($rootScope){
$scope.$on('copyEvent', function(event, arguments) {
alert("Holla... You have clicked copy icon");
});
}
}
To trigger that event just from child just $emit 仅从孩子$ emit触发该事件
$scope.$emit('copyEvent', arguments);
Hope this helps. 希望这可以帮助。 Thanks !
谢谢 !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.