javascript - ng-view创建多个 Controller /作用域

我不知道如何解决此当前问题。我在页面上有5个标签。每个选项卡都通过路由和ng-view加载新页面和 Controller 。在进入下一个选项卡之前，每个选项卡上都有一个$ locationChangeStart来完成一些功能。但是，如果用户返回到上一个选项卡，那么我们会遇到一些问题。在完成对选项卡的处理并切换到另一个选项后，$ locationChangeStart函数将被多次触发，似乎每个选项卡开关都在原始选项卡上创建了一个新的 Controller 。

所以:

当前选项卡=

切换到新标签页(B)

$ locationChangeStart按预期方式触发

切换回选项卡

$ locationChangeStart再次为Tab A触发(由于我不在该页面上了，所以没想到，但是还可以)

切换到新标签页(C)

2 $ locationChange开始射击。第一次访问该标签时，一个具有新范围，另一个具有原始范围。

从选项卡A切换到a时，此过程将无限次数地发生，每次调用的数量将增加1。

塞子:working demo

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

最佳答案

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

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

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

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