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

I am unaware of how to fix this current problem. I have 5 tabs on a page. Each tab loads a new page and controller via routing and ng-view. I have a $locationChangeStart on each tab to finish up some functionality before going to the next tab. However, if a user returns to the previous tab, then we get some issues. After finishing whatever it is they do with the tab and switch to another, the $locationChangeStart function will get fired numerous times, it seems that a new controller is being created every tab switch from the original tab.

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

so:

Current Tab = A

当前标签= A.

Switch to new tab (B)

切换到新标签(B)

$locationChangeStart fires as expected

$ locationChangeStart按预期触发

Switch back to tab A

切换回选项卡A.

$locationChangeStart fires for Tab A again (wasn't expected as I'm not on that page anymore but okay)

$ locationChangeStart再次触发标签A(因为我不在那个页面上,所以没有预期,但没关系)

Switch to new tab (C)

切换到新标签(C)

2 $locationChangeStart fire. One with a new scope, other with original scope when first visited the tab.

2 $ locationChangeStart开火。一个具有新范围,另一个具有原始范围,当第一次访问选项卡时

This process will happen an infinite amount of times when switching to a from Tab A, the number calls going up by 1 each time.

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

plunker: working demo

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>

Tab 1:

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

Tab 2:

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

main page js:

主页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

标签1 JS

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

1 个解决方案

#1

That's because you're attaching your event listener to $rootScope instead on $scope.

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

Each time InformationController is loaded you attach new $locationChangeStart event listener to the $rootScope.

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

When you switch between tabs, the $rootScope doesn't reload, it stays intact, so you just keep adding the same event listener each and every time. After switching to "Information" tab for the fifth time, you got yourself five listeners built up and listening.

当您在标签之间切换时,$ rootScope不会重新加载,它会保持不变,所以您每次都要继续添加相同的事件监听器。在第五次切换到“信息”选项卡后,您可以自己组建五个听众并进行聆听。

Instead of $rootScope, use $scope, which will get $destroyed when route changes, and as such, will clear your previous listener.

而不是$ rootScope,使用$ scope,当路由更改时会损坏$,因此,将清除您以前的侦听器。

#1