ng-view tworzenie wielu kontrolerów/zakres

Question

Nie jestem świadomy, jak rozwiązać ten obecny problem. Mam 5 kart na stronie. Każda zakładka ładuje nową stronę i kontroler poprzez routing i ng-view. Mam $ locationChangeStart na każdej karcie, aby zakończyć niektóre funkcje przed przejściem do następnej karty. Jeśli jednak użytkownik powróci do poprzedniej karty, otrzymamy pewne problemy. Po zakończeniu tego, co robią z kartą i przełączeniem się na inną, funkcja $ locationChangeStart będzie wielokrotnie uruchamiana, wydaje się, że tworzony jest nowy kontroler z każdego przełącznika tabulacji z oryginalnej zakładki.

tak:

• Aktualny Tab = A
• Przełącz na nowej karcie (B) pożarów
• $ locationChangeStart jak oczekiwano
• powrócić do JOT
• $ locationChangeStart pożarów na karcie Ponownie (nie oczekiwano, ponieważ nie jestem już na tej stronie, ale w porządku)
• Przełącz na nową zakładkę (C)
• 2 $ locationChangeStart fire. Jeden z nowym zakresem, inny z oryginalnym zasięgiem, gdy po raz pierwszy odwiedził kartę.

Ten proces będzie miał miejsce nieskończoną ilość razy po przełączeniu z Tab. A, a liczba połączeń będzie wzrastać o 1 za każdym razem.

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> 

Tab 1:

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

Tab 2:

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

główne js strona:

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

To dlatego, że jesteś dołączając swój detektor zdarzeń do $ rootScope zamiast na $ zakresu.

Za każdym razem, gdy załadowano InformationController, dołącza się nowy odbiornik zdarzeń $locationChangeStart do .

Po przełączeniu się między zakładkami, $ rootScope nie przeładowuje się, pozostaje nienaruszone, więc po prostu dodajesz ten sam detektor zdarzeń za każdym razem. Po przejściu na zakładkę "Informacje" po raz piąty, stworzyłeś i słuchałeś pięciu słuchaczy.

Zamiast $ rootScope, użyj $ scope, który otrzyma $ zniszczone po zmianie trasy, i jako taki wyczyści twojego poprzedniego słuchacza.