繁体   English   中英

来自不同控制器的angularJs调用函数

[英]angularJs call function from different controllers

我们正在尝试使用phonegap onsen和angularJS开发应用程序。

我正在尝试从其他控制器调用函数。 我看过很多关于如何做到这一点的文档

但是由于某些原因,它对我不起作用。 到目前为止,这是我的代码。

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

它显示在控制台“ 0”和“ 1”上,但不显示“ 2”。

这可能是一个简单的问题,但是我的代码似乎找不到问题。

提前致谢。

我认为可能发生的情况是,您在controller2的本地范围(即$ scope)中为事件“ show-dialog-of-some-event”声明了一个事件处理程序。 您在$ rootScope中发出一个事件。 发出的事件冒泡而不是冒泡,因此事件“ show-dialog-of-some-event”不会从$ rootScope到$ scope冒泡。 您可能想在根作用域上为“ show-dialog-of-some-event”定义事件处理程序,例如

    $rootScope.$on('show-dialog-of-some-event', function(e,d) {});

如果要在同级控制器之间以及从父级控制器到子级控制器之间进行通信,则必须使用$ scope。$ broadcast,但如果要从子级到父级进行通信,则必须使用$ scope。$ emit

您的代码有2处错误:

1: $broadcast事件沿作用域层次结构向下流动, $emit用于将事件冒泡到作用域层次结构中,而是使用以下命令:

$rootScope.$broadcast('show-dialog-of-some-event', data);

有关更多信息,请参见以下答案: $ rootScope。$ broadcast与$ scope。$ emit

2:模块的run功能将在控制器为该事件附加事件处理程序之前执行,因此,在您在控制器中配置事件处理程序时,该事件已经通过:

同样,请参阅此答案AngularJS app.run()文档?

因此,您的答案的解决方案是:

  • $emit更改为$broadcast
  • 稍后将$broadcast调用移入生命周期,以便controller将附加其侦听器

这是一个plunkr,在生命周期的稍后阶段我会调用$broadcast (在这种情况下,当窗口加载时):

http://plnkr.co/edit/W7efiKqIlu4va4AcBTbG

如果您不需要在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');
    });
}]);

它不如使用服务干净,但是如果不经常使用此模式,则可以使用它。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM