ng-视图创建多个控制器/作用域

Question

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

因此：

• 当前表=A
• 切换到新选项卡(B)
• $locationChangeStart火灾如预期
• 切换回选项卡A
• $locationChangeStart再次触发Tab A(因为我已经不在页面上了，但还好)
• 切换到新选项卡(C)
• 2 $locationChangeStart火灾。一个具有新范围，另一个在第一次访问选项卡时具有原始范围。

当从Tab A切换到a时，这个过程将发生无限次，每次通话次数增加1次。

柱塞：工作演示

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

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

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

当您在制表符之间切换时，$rootScope不会重新加载，它将保持原样，所以每次都要添加相同的事件侦听器。在第五次切换到“信息”选项卡之后，你就得到了五个听众。

不要使用$rootScope，而是使用$scope，它将在路由更改时获得$destroyed，因此将清除先前的侦听器。