5

我不知道如何解决这个当前的问题。我在一个页面上有 5 个标签。每个选项卡通过路由和 ng-view 加载一个新页面和控制器。我在每个选项卡上都有一个 $locationChangeStart 来完成一些功能，然后再转到下一个选项卡。但是，如果用户返回到上一个选项卡，那么我们会遇到一些问题。在完成他们对选项卡所做的任何事情并切换到另一个之后， $locationChangeStart 函数将被多次触发，似乎每次从原始选项卡切换选项卡都会创建一个新控制器。

所以：

  • 当前选项卡 = A
  • 切换到新标签 (B)
  • $locationChangeStart 按预期触发
  • 切换回选项卡 A
  • $locationChangeStart 再次为选项卡 A 触发（没想到，因为我不再在该页面上，但没关系）
  • 切换到新标签 (C)
  • 2 $locationChangeStart 火灾。一个具有新范围，另一个在第一次访问选项卡时具有原始范围。

当从 Tab A 切换到 a 时，这个过程会发生无数次，每次调用的数量都会增加 1。

plunker：工作演示

索引.html：

<div ng-controller="visitController">
  <h3>ng-view demo</h3>

  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#/Information">Information</a>
    </li>
    <li><a href="#/Fingerprint">Fingerprint</a></li>
    <li><a href="#/Agenda">Agenda</a></li>
    <li><a href="#/Logistics">Logistics</a></li>
  </ul>

  <div ng-view>
  </div>
</div>

表 1：

<div ng-controller="InformationController">
    This is the information tab.
</div>

选项卡 2：

<div>
    This is the Fingerprint tab.
</div>

主页面js：

angular.module('app', []).config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
  $routeProvider.when('', {
      templateUrl: "Information.html",
      controller: visitController
  }).when('/Information', {
      templateUrl: "Information.html",
      controller: visitController
  }).when('/Fingerprint', {
      templateUrl: "Fingerprint.html",
      controller: visitController
  })

  $routeProvider
    .otherwise('/Information', {
      redirectTo: "Information.html"
    });
  }
]);

function visitController($scope, $http, $window, $route, $rootScope) {

}

选项卡 1 JS

function InformationController($scope, $http, $window, $route, $rootScope) {
  $scope.activated = 0;
  $rootScope.$on('$locationChangeStart', function (event) {
      $scope.activated++;
      alert($scope.activated);
  });
}
4

1 回答 1

5

那是因为您将事件侦听器附加到 $rootScope 而不是 $scope。

每次InformationController加载时，您都会将新$locationChangeStart的事件侦听器附加到$rootScope.

当您在选项卡之间切换时，$rootScope 不会重新加载，它保持不变，因此您只需每次都添加相同的事件侦听器。在第五次切换到“信息”选项卡后，您已经建立了五个听众并开始收听。

代替 $rootScope，使用 $scope，它会在路由改变时得到 $destroyed，因此会清除你之前的监听器。

于 2013-07-07T17:08:56.523 回答