$broadcast and $on Controllers communication doesn't work

[irmana]

Hello,

I was trying to solve this in a few ways.

"Controller A" is included in jQM "Page A" and "Controller B" is included in jQM "Page B". I pass some variable from the "Controller A" to the parent service, where I call $broadcast function. In "Controller B" I have included $on function, which should wait to be triggered and do something.

Problem is, that $on function is never called. $broadcast is called and shared service gets passed variable. Does anybody have some tips or ideas? Is this bug or I'm doing something wrong?

Thank you.

[tbosch]

Hi, well, the scopes of different pages are isolated from each other, so that only the currently visible page is digested. Internally, we disconnect the scopes of the non visible pages from the root scope, and that's the reason why events from a controller on one page do not reach the other controllers.

What is your usecase exactly?

Tobias

[irmana]

My usecase is bellow. I hope I did not put out something I shouldn't. If you have any suggestion/solution, please point to it. It is true, while one page is displayed, other one is hidden. How can this be solved then.. hmm...

JS Code:

rbmodule.factory('rbBroadcastService', function($rootScope) {
    var sharedService = {};
    sharedService.message = {};
    sharedService.eventName = '';
    sharedService.prepForBroadcast = function( evName, msg ) {
        this.message = msg;
        this.eventName = evName;
        this.broadcastItem();
    };
    sharedService.broadcastItem = function() {
        $rootScope.$broadcast(this.eventName);
    };
    return sharedService;
});

rbmodule.controller( 'CtrlNewOrder', [ '$scope', 'rbStore', 'rbSharedService', function( $scope, rbStore, sharedService ) {
        $scope.saveRBOrder = function() {
            var storedata = ['one', 'two', 'three'];
            sharedService.prepForBroadcast( 'broadcastOnSave', storedata );
            delete storedata;
        }
}]);

rbmodule.controller( 'CtrlOrders', [ '$scope', 'rbStore', 'rbSharedService', 'rbBroadcastService', function( $scope, rbStore, sharedService, broadcastService ) {
    $scope.$on('broadcastOnSave', function() {
        console.log('CtrlOrders: ');
        console.log(broadcastService.message);
        // do something
    }); 
}]);

HTML:

        <div data-role="page" data-theme="b" id="page-home"
        ng-controller="CtrlHome" ngm-pagebeforeshow="refreshData()">

            <!-- other html code -->

        </div>

        <div data-role="page" data-theme="b" id="page-orders"
        ng-controller="CtrlOrders" ngm-pagebeforeshow="refreshRBOrders()">

            <!-- other html code -->

        </div>

[tbosch]

Hi, I though about this. In plain angular, there is also no way of communicating between controllers that are loaded by different pages shown in ngView, as at every point in time there is only one controller and all other have been removed. With the adapter, the other controllers stay alife due to jQuery Mobile caching the pages. Please note that this caching can be modified for external pages (see here: http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html).

Closing this as it is a won't fix. Tobias