[英]angularJs call function from different controllers
We are trying to develop an app using phonegap onsen and angularJS. 我们正在尝试使用phonegap onsen和angularJS开发应用程序。
I am trying to call a function from a different controllers. 我正在尝试从其他控制器调用函数。 I have seen alot of documentation on how to do this like this
我看过很多关于如何做到这一点的文档
But for certain reason it doesn't work for me. 但是由于某些原因,它对我不起作用。 Here is my code so far.
到目前为止,这是我的代码。
module.run(function ($rootScope) {
$rootScope.$on('some-event-here', function (event, data) {
console.log('1');
$rootScope.$emit('show-dialog-of-some-event', data);
//I also tried
//$rootScope.$broadcast('show-dialog-of-some-event', data);
});
});
module.controller('controller1', ['$scope', '$http', function($scope, $http) {
$scope.proceed = function() {
console.log('0');
$scope.$emit('some-event-here', {});
}
}]);
module.controller('controller2', ['$scope', '$http', function($scope, $http) {
$scope.$on('show-dialog-of-some-event', function (event, data) {
console.log('2');
ons.createDialog('some-dialog.html').then(function(dialog) {
//some code here
});
});
}]);
It show on the console '0' and '1' but it doesn't show '2'. 它显示在控制台“ 0”和“ 1”上,但不显示“ 2”。
This could be an easy problem but I can't seem to find the problem with my code. 这可能是一个简单的问题,但是我的代码似乎找不到问题。
Thanks in advance. 提前致谢。
I think what may be occurring is that you declare an event handler for the event 'show-dialog-of-some-event' in the local scope of controller2, ie $scope. 我认为可能发生的情况是,您在controller2的本地范围(即$ scope)中为事件“ show-dialog-of-some-event”声明了一个事件处理程序。 You emit an event in the $rootScope.
您在$ rootScope中发出一个事件。 Emitted events bubble up not down, so the event 'show-dialog-of-some-event' does not "bubble down" from the $rootScope to $scope.
发出的事件冒泡而不是冒泡,因此事件“ show-dialog-of-some-event”不会从$ rootScope到$ scope冒泡。 You may want to define the event handler for 'show-dialog-of-some-event' on the root scope instead, eg
您可能想在根作用域上为“ show-dialog-of-some-event”定义事件处理程序,例如
$rootScope.$on('show-dialog-of-some-event', function(e,d) {});
如果要在同级控制器之间以及从父级控制器到子级控制器之间进行通信,则必须使用$ scope。$ broadcast,但如果要从子级到父级进行通信,则必须使用$ scope。$ emit
2 things are wrong with your code: 您的代码有2处错误:
1: $broadcast
bubbles events down the scope hierarchy, $emit
is for bubbling them up the scope hierarchy, instead use this: 1:
$broadcast
事件沿作用域层次结构向下流动, $emit
用于将事件冒泡到作用域层次结构中,而是使用以下命令:
$rootScope.$broadcast('show-dialog-of-some-event', data);
For more info see this answer: $rootScope.$broadcast vs. $scope.$emit 有关更多信息,请参见以下答案: $ rootScope。$ broadcast与$ scope。$ emit
2: the run
function of your module will be executed before your controller will attach an event handler for this event, therefore the event will have already passed by the time you configure an event handler in your controller: 2:模块的
run
功能将在控制器为该事件附加事件处理程序之前执行,因此,在您在控制器中配置事件处理程序时,该事件已经通过:
Again, see this answer AngularJS app.run() documentation? 同样,请参阅此答案AngularJS app.run()文档?
So the solution to your answer is: 因此,您的答案的解决方案是:
$emit
to $broadcast
$emit
更改为$broadcast
$broadcast
call later into the lifecycle so the controller
will have attached its listener $broadcast
调用移入生命周期,以便controller
将附加其侦听器 Here's a plunkr where I'm calling $broadcast
later in the lifecycle (in this case when the window loads): 这是一个plunkr,在生命周期的稍后阶段我会调用
$broadcast
(在这种情况下,当窗口加载时):
http://plnkr.co/edit/W7efiKqIlu4va4AcBTbG http://plnkr.co/edit/W7efiKqIlu4va4AcBTbG
If you don't need to process anything on rootscope you can just inject $rootScope into controller 如果您不需要在rootscope上进行任何处理,则可以将$ rootScope注入控制器
module.controller('controller1', ['$scope', '$http', '$rootScope', function($scope, $http, $rootScope) {
$scope.proceed = function() {
console.log('0');
$rootScope.$boardcast('some-event-here', {});
}
}]);
module.controller('controller2', ['$scope', '$http', function($scope, $http) {
$scope.$on('some-event-here', function (event, data) {
console.log('2');
});
}]);
It's less clean than using a service but you can use this pattern if it's not too often. 它不如使用服务干净,但是如果不经常使用此模式,则可以使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.