ng-view创建多个控制器/范围

Question

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

所以:

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

当从标签A切换到a时,此过程将发生无限次,每次呼叫数量增加1.

plunker:工作演示

index.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);
  });
}

Answer 1

那是因为您将事件监听器附加到$ scope上的$ rootScope上。

每次InformationController加载时，您都将新$locationChangeStart事件监听器附加到$rootScope。

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

代替$ rootScope，使用$ scope，它会在路由更改时破坏$，因此，它将清除以前的侦听器。