Ionisches Ereignissystem: Keine Ereignisse Feuer

Question

Ich habe seit einiger Zeit Angular-Apps gebaut, aber dies ist meine erste Ionic App. Ich versuche $ aus $ rootScope zu senden, aber es scheint nicht zu funktionieren.

Mit Ionic Version "1.3.1"

Mit dem App-Set-up aus dem Gerüst (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 einem meiner Controller Ich teste mehrere Ereignisse direkt nebeneinander ohne Erfolg. Diese Debugger nie getroffen:

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

Aber wenn ich versuchen, einige integrierte Ereignis aus der Dokumentation wie:

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

dann ist es getroffen. Ich weiß also, dass Ereignisse funktionieren, ich kann keine benutzerdefinierten Ereignisse erstellen. Irgendwelche Ideen, warum meine Ereignisse nicht schießen oder empfangen werden, würden geschätzt werden!

Answer 1

Ich bin nicht genau sicher, was ist dein Problem, aber ich denke, es ist das Problem, dass Sie $broadcasting das Ereignis, bevor der Hörer angeschlossen ist. Wenn Sie eine $timeout um Ihre Sendung hinzufügen würden, wird der Listener ausgelöst.

Bitte werfen Sie einen Blick auf die Demo unten oder diese 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>