Question

我有一个非常简单的设置两个标签，主页和管理员

drawSomthing

在控制器中，我有一个$ viewContentLoaded事件的监听器像这样： $routeProvider // route for the home page .when('/home', { templateUrl : 'views/home.html', controller : 'myCtrl', controllerAs: 'vm', resolve:{ loadDropDowns:function(DataSvc,$rootScope){ return DataSvc.GetDropDowns(); } } }) // route for admin page .when('/admin',{ templateUrl : 'admin/templates/admin.html' })

每次点击主页面选项卡时，事件处理程序会首次加倍，因此第一次是2，而不是4，而不是8 ......等等...

我在加载下拉菜单时播放了另一个事件，对于一个brodcasted事件，我也得到了多个处理程序。

$rootScope.$on('$viewContentLoaded', function(event){
        console.log(" viewContentLoaded fired ");
      });

并在同一个控制器中：

 $rootScope.$broadcast('dropDownsSet');

也被多次执行..（与上面相同，每次加倍事件处理程序触发的次数）

我的智慧结束了，这可能是什么原因导致这种疯狂？

Answer 1

移动事件绑定代码

$rootScope.$on('$viewContentLoaded', function(event){
  console.log(" viewContentLoaded fired ");
});

从myCtrl控制器到某个主应用程序（父）控制器。现在发生的是每次导航到Home选项卡时，myCtrl都会被实例化，从而在$rootScope上再注册一个事件监听器。

Answer 2

$rootScope.$on('dropDownsSet', function(event, mass) {}

$rootScope侦听器事件不会被破坏。你需要使用$ destroy来销毁它。最好使用$scope.$on作为$ scope的监听器自动销毁。

$scope.$on('dropDownsSet', function(event, mass) {}

或者，

  var customeEventListener = $rootScope.$on('dropDownsSet', function(event, mass) {

    }

 $scope.$on('$destroy', function() {
        customeEventListener();
    });

在Angular ngRoute应用程序中多次触发$ viewContentLoaded

2 个答案: