离子事件系统：没有事件触发

Question

我构建 Angular 应用程序已经有一段时间了，但这是我的第一个 Ionic 应用程序。我正在尝试 $broadcast 来自 $rootScope 的事件，但它似乎不起作用。

使用 Ionic 版本“1.3.1”

使用脚手架中的应用程序设置 (ionic start {appname} {template})。 app.js 设置：

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', {...

在我的一个控制器中，我正在测试多个彼此相邻的事件，但都无济于事。这些调试器从未命中：

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

但是如果我尝试文档中的一些内置事件，例如：

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

然后它确实命中了。所以我知道事件确实有效，我只是不能创建自定义事件。任何关于为什么我的事件没有触发或未被接收的想法都将不胜感激！

Answer 1

我不太确定你的问题是什么，但我认为问题是你 $broadcasting 附加侦听器之前的事件。如果您要在广播周围添加 $timeout，则将触发侦听器。

请看下面的演示或这个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>

离子事件系统：没有事件触发

Ionic events system: no events fire

javascript

dom-events

angularjs

ionic-framework