Ionic events system: no events fire

Question

I've been building Angular apps for a while, but this is my first Ionic app. I'm trying to $broadcast an event from $rootScope, but it doesn't seem to be working.

Using Ionic version "1.3.1"

Using the app set-up from the scaffold (ionic start {appname} {template}). app.js setup:

angular
  .module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);

        }
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
      });
    })
  .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom')
    $stateProvider
  .state('tab', {...

In one of my controllers I'm testing several events right next to each other to no avail. These debuggers never hit:

  $rootScope.$broadcast("testing123", {message: "test"});
  $rootScope.$emit("testing456", {message: "test #2"});

  $scope.$on("testing123", function(object) {
    debugger;
  });
  $scope.$on("testing456", function(object) {
    debugger;
  });
  $rootScope.$on("testing456", function(object) {
    debugger;
  });

But if I try some built-in event from the documentation like:

 $scope.$on("$ionicView.beforeEnter", function(event, data){
     console.log("State Params: ", data.stateParams);
  });

then it does hit. So I know events do work, I just can't make custom events. Any ideas why my events are not firing or being received would be appreciated!

Answer 1

I'm not exactly sure what's your problem but I think it's the problem that you're $broadcasting the event before the listener is attached. If you would add a $timeout around your broadcast then the listener will be triggered.

Please have a look at the demo below or this jsfiddle.

angular.module('demoApp', ['ionic', 'ui.router'])
  .controller('mainController', MainController)
  .config(routes);

function MainController($rootScope, $scope, $timeout) {
  $scope.testEvent = function() {
    $rootScope.$broadcast('test1');
  };
  $scope.testEvent2 = function() {
    $rootScope.$broadcast('test2', {
      data: 'hello from test 2'
    });
  };

  $timeout(function() {
    $rootScope.$broadcast('test1');
  }, 0);
}

function routes($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise('/');

  $stateProvider.state('home', {
    url: '/',
    template: '<h1>home</h1><button ng-click="test()">test</button><ul><li ng-repeat="row in terminal track by $index">{{row}}</li></ul>',
    controller: function($rootScope, $scope) {
      $scope.terminal = [];

      function log(evt, data) {
        //console.log('received event', evt, data);
        $scope.terminal.push('received ' + evt.name);
      }
      $scope.test = function() {
        $rootScope.$broadcast('test');
      }

      $scope.$on('test', log);
      $scope.$on('test1', log);
      $scope.$on('test2', log);
    }
  });
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/css/ionic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Ionic Blank Starter</h1>
      <button ng-click="testEvent()">
        send event1
      </button>
      <button ng-click="testEvent2()">
        send event2
      </button>
    </ion-header-bar>
    <ion-content class="has-header">
      <ui-view></ui-view>
    </ion-content>
  </ion-pane>
</div>