ng-view, создающий несколько контроллеров/область действия

Question

Я не знаю, как исправить эту проблему. У меня есть 5 вкладок на странице. Каждая вкладка загружает новую страницу и контроллер через маршрутизацию и ng-view. У меня есть $ locationChangeStart на каждой вкладке, чтобы завершить некоторые функции, прежде чем перейти к следующей вкладке. Однако, если пользователь возвращается к предыдущей вкладке, мы получаем некоторые проблемы. По завершении того, что он делает с вкладкой и переключится на другую, функция $ locationChangeStart будет запущена много раз, кажется, что каждый контроллер табуляции создается с нового вкладка с исходной вкладки.

так:

• Current Tab = A
• Переключение на новую вкладку (B)
• $ locationChangeStart пожаров, как и ожидалось
• Переключение обратно на вкладку A
• $ locationChangeStart пожаров на вкладке A снова (не ожидалось, так как я больше не на этой странице, но хорошо)
• Перейти на новую вкладку (C)
• 2 $ locationChangeStart fire. Один с новой областью, другой с оригинальной областью при первом посещении вкладки.

Этот процесс будет происходить бесконечно много раз при переключении на вкладку А, число звонков увеличивается на 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> 

Tab 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 вместо этого на $ объеме.

При загрузке InformationController вы присоединяете новый $locationChangeStart прослушиватель событий к $rootScope.

При переключении между вкладками $ rootScope не перезагружается, он остается неповрежденным, поэтому вы просто добавляете один и тот же прослушиватель событий каждый раз. После перехода на вкладку «Информация» в пятый раз вы получили пять слушателей, которые были созданы и слушали.

Вместо $ rootScope используйте $ scope, который будет уничтожен при изменении маршрута и, как таковой, очистит ваш предыдущий прослушиватель.