簡體   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