ng-view çoklu denetleyicileri/kapsamı oluşturma

Question

Bu geçerli sorunu nasıl düzelteceğimin farkında değilim. Bir sayfada 5 tane sekme var. Her sekme, yönlendirme ve ng görünümü aracılığıyla yeni bir sayfa ve denetleyici yükler. Bir sonraki sekmeye gitmeden önce bazı işlevleri tamamlamak için her sekmede $ locationChangeStart var. Ancak, bir kullanıcı bir önceki sekmeye geri dönerse, bazı sorunlar alırız. Sekme ile ne yaparsanız bitirir ve bir diğerine geçtikten sonra, $ locationChangeStart işlevi birçok kez ateşlenir, orijinal sekmesinden her sekme anahtarının yeni bir denetleyici oluşturulduğu görülür.

yüzden:

Anahtarı geri sekmesine Tab için

$ locationChangeStart yangınları beklendiği gibi

• Güncel Tab yeni sekmede (B)
• $ locationChangeStart yangınlara bir
• Anahtarı = Bir kez daha (o sayfada değil, ama daha fazla beklemiyordum)
• Yeni sekmeye geç (C)
• 2 $ locationDeğiştirme Yangına başlayın. Sekmeyi ilk kez ziyaret ettiğinde, orijinal kapsamı olan yeni bir kapsam.

Bu işlem, Tab A'dan A'ya geçişte sonsuz sayıda kez gerçekleşir, sayı çağrıları her seferinde 1'e kadar gider.

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> 

Sekme 1:

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

Tab 2:

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

ana sayfa 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 yerine $ kapsamına $ rootScope için olay dinleyicisi ekleyerek çünkü var 1 JS

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

Answer 1

.

InformationController her yüklendiğinde, $rootScope numaralı telefona yeni $locationChangeStart olay dinleyicisini eklersiniz.

Sekmeler arasında geçiş yaptığınızda, $ rootScope yeniden yüklenmez, bozulmadan kalır, böylece her zaman aynı olay dinleyicisini eklemeye devam edersiniz. Beşinci kez "Bilgi" sekmesine geçtikten sonra, kendinize beş dinleyiciyi oluşturup dinlediniz.

$ rootScope yerine, rota değiştiğinde $ imha edilecek $ kapsamını kullanın ve bu nedenle önceki dinleyicinizi temizleyecektir.