Question

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

这样：

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

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

plunker：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) {

}

Tab 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不会重新加载，它会保持不变，所以你每次都要继续添加相同的事件监听器。在第五次切换到“信息”选项卡后，您可以自己组建五个听众并进行聆听。

使用$ scope代替$ rootScope，当路由发生变化时会损坏$，这样就会清除你以前的监听器。

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

1 个答案: