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

前端之家收集整理的这篇文章主要介绍了javascript – ng-view创建多个控制器/范围前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

所以:

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

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

plunker:working demo

index.html的:

标签1:

标签2:

主页js:

angular.module('app',[]).config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
  $routeProvider.when('',{
      templateUrl: "Information.html",controller: visitController
  }).when('/Information',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,$rootScope) {
  $scope.activated = 0;
  $rootScope.$on('$locationChangeStart',function (event) {
      $scope.activated++;
      alert($scope.activated);
  });
}
最佳答案
那是因为你将事件监听器附加到$rootScope而不是$scope.

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

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

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

猜你在找的JavaScript相关文章