AngularJS + Ionic - how to call method on the second controller from first controller with deffer promise?

Question

I need to call method for initialization user setting values (which are set to rootscope) from second cotroller in method of the first controller.

After the values are succesfully set to rootscope return premise and continue in executing of the second method of the first controller.

I tried it with emit and broadcast examples, but without luck.

Could somebody please give me a advice how to do it correctly?

I am on Angular 1.2 and Ionic 1, beta 13

Many thanks for any help.

Template:

<ion-view title="{{ 'DAYS_RESULTS' | translate }}" >
    <ion-content ng-controller="DailyStatsCtrl" ng-init="setData()">

Code:

// First cotroller call setData in ng-init

angular.module('starter')
// Controller definition
.controller('DailyStatsCtrl', function($scope, $rootScope, $ionicSlideBoxDelegate, $timeout , $ionicLoading , $q, $translate, DialsComputeService, cordova, LocalStorService,  $ionicPopup, $state, $ionicNavBarDelegate, testService, $ionicPlatform) {


        $scope.setData = function() {
            $ionicPlatform.ready(function() {
                $timeout(function() {
                    $scope.$emit("onSomething", "");
                    alert("TEST");
                }, 1000);
            });
        };

In the second controller:

angular.module('starter')
// Controller definition
.controller('SettingsCtrl', function($scope, $rootScope, $ionicLoading, $ionicPlatform, LocalStorService, $timeout, $translate, $ionicPopup, $state, $ionicNavBarDelegate) {

    $scope.getUserSettigns = function() {
        alert("received");
        $scope.test = 'event received';
    }
    $scope.$on('onSomething', function(e) {
        $scope.getUserSettigns();
    });

Could you post code of first and second controllers and is relations in html. — Rasalom, Dec 09 '14 at 14:51

Jamilson Junior · Answer 1 · 2015-11-12T13:56:26.973

In ionic, a controller function can't be called before the controller view load. If the view of your second controller has been loaded, you can do this:

secondview.html:

set ion-content id to get the controller scope

<ion-view title="second">
    <ion-content id="secondView">

    </ion-content>
</ion-view>

Seccond controller:

app.controller('SecondController', function($scope, $http) {

    $scope.someFunction = function(args) {
        alert(args.Message);
    };

});

Code:

app.controller('CodeController', function($scope) {

    $scope.$on('$ionicView.beforeEnter', function(){
        angular.element($('#secondView')).scope().someFunction({ Message: "Hello!" });
    });

});

Hope this helps.

score 0 · Answer 2 · answered Dec 09 '14 at 15:23

To achive this you don't really need to use $rootScope(but you can), $broadcast will call watchers for event in current and all child scopes, so this code in parent controller:

$scope.setData = function() {
    $timeout(function() {
      $scope.$broadcast("onSomething", "");
    }, 5000); 
  };

will trigger all $scope.$on('onSomething', ..) callback in current and all child controllers.

here's a codepin with working example(text 'event received' will appear after 5s in rendered html).

http://codepen.io/anon/pen/VYeEOg

Unfortunatelly, for me is working only $broadcast, not $scope.on no error or exception is throwed, so i dont know what i can i do wrong. — redrom, Dec 09 '14 at 16:50

Callum Linington · Answer 3 · 2014-12-09T20:43:08.823

I have literally just done some event emitting. It is a pain but here is down low:

$scope.$broadcast

This will emit events down the children scopes

Angular Doc Definition:

Dispatches an event name downwards to all child scopes (and their children)

$scope.$emit

This will emit events up to the parent scopes

Angular Doc Definition:

Dispatches an event name upwards through the scope hierarchy

Me and my collegue believe that this is the best method. But also I believe this is the most reliable:

In the controller / service that is dispatching the event inject the $rootScope and use $broadcast

.service('DispatchEvent', ['$rootScope', function ($rootScope) {
    $rootScope.$broadcast('someEvent');
}]);

On the controller / service that is receiving the event, inject the $scope and use $on

.controller('ReceivingEventsController', ['$scope', function ($scope) { 
     $scope.$on('someEvent', function (e) { 
         // do something 
     }); 
}]);

This way the $rootScope will always be $broadcasting down the scope hierarchy because - as the name suggests - it is the root scope. So now you don't have to worry about whether to use $emit or $broadcast because using the $scope means it will always be a child of $rootScope.

So in your case it's easy. The first controller should have $rootScope injected and use $broadcast. The second controller should have $scope and use $on, and look like this:

$scope.$on('onSomething', function(e) {
    $scope.getUserSettings();
});

Here is a working plunker: http://plnkr.co/edit/PrD3vB80lFSt0a9WQLJ9?p=preview

Unfortunatelly, for me is working only $broadcast, not $scope.on no error or exception is throwed, so i dont know what i can i do wrong. — redrom, Dec 09 '14 at 16:49
I don't understand your comment, what isn't working and what is? — Callum Linington, Dec 09 '14 at 16:56
@redrom if you post all your angular code then I can take a look and see what isn't working! — Callum Linington, Dec 09 '14 at 16:57
Thank You. I just updated question to real code in controllers and template view. — redrom, Dec 09 '14 at 17:18
Well you need to actaully do what I've suggested in order for it to work. You've used `$emit` rather than `$rootScope.$broadcast` — Callum Linington, Dec 09 '14 at 18:17

AngularJS + Ionic - how to call method on the second controller from first controller with deffer promise?

3 Answers3