使用后退按钮时$broadcast和$on问题

$broadcast and $on issue when using back button

本文关键字：broadcast on 问题 按钮      更新时间：2023-09-26

我有 2 个视图（"索引"和"项目"）。

"索引"有一个按钮，只需转到"项目"。

"item"有一个控制器，该控制器调用广播事件的服务，控制器不断侦听此事件以用值填充对象。

问题：在我第一次单击按钮并转到"项目"时，我得到了正确的对象值。但是，如果我单击后退按钮（返回"索引"）并再次单击同一按钮，我会转到"项目"但对象为空。

我的服务 

update: function() {
  $rootScope.$broadcast('event:item-updated');
  console.log("broadcast item updated");
  return;
}

项目控制

.controller('ItemCtrl', function($scope, $state, MyService) {
  console.log("Item controller");
  MyService.update();
  $scope.item = {};
  $scope.$on('event:item-updated', function(e, status) {
    $scope.item = {"name": "My Item"};
    console.log("on item updated");
  });
}

索引网页

<ion-view view-title="Index">
  <ion-content>
    <div>
      <button class="button" ui-sref='app.item'>
        Item
      </button>
    </div>
  </ion-content>
</ion-view>

项目网页

<ion-view view-title="Item">
  <ion-content>
    <div>
      {{item.name}}
    </div>
  </ion-content>
</ion-view>

使用一些控制台.log（），我可以检查：

第一次：

  • 物料控制器
  • 广播项目已更新
  • 在项目更新时

第二次：

  • 物料控制器
  • 广播项目已更新

因此，由于某种原因，当我在其他时间转到"项目"时，侦听器不起作用。

我解决了更改声明侦听器和调用服务器的顺序的问题。

.controller('ItemCtrl', function($scope, $state, MyService) {
  console.log("Item controller");
  $scope.item = {};
  $scope.$on('event:item-updated', function(e, status) {
    $scope.item = {"name": "My Item"};
    console.log("on item updated");
  });
  MyService.update();
}

因此，我应该在调用服务（广播事件）之前声明侦听器。

相关文章：