Cliccando su ui angolare evento incendi schede molte volte

Question

Ho 15 schede che utilizzano schede di interfaccia utente angolari come questo

Questo è modello

<tabset justified="true"> 
    <tab heading="{{ tab.display }}" 
     select="tsc.selectTab(tab.date)" 
     ng-repeat="tab in tsc.tabs"> 
     <div ng-include="'entries.html'"></div> 
    </tab> 
</tabset> 

Questo è un controllore

$scope.activeTabDate = ''; 

self.selectTab = function (tabDate) { 
    $scope.activeTabDate = tabDate; 

}; 

ora Questo è il mio controller figlio per entries.html

$scope.$parent.$watch('activeTabDate', function (newValue, oldValue) { 
    if (newValue !== oldValue) { 
     console.log('--'+newValue); 
    } 
}); 

Ho 15 schede nella pagina. Il mio problema è ogni volta che clicco sulla scheda. In console.log ottengo 15 voci invece di una. Perché è

Answer 1

Rimuovere l'importazione manuale dal file entries.html e utilizzare ng-controller nel div che include entries.html. Poi, penso che non sarà necessario utilizzare $ scope.parent nel controller del bambino, come il campo di applicazione sarà lo stesso come il principale

<tabset justified="true"> 
    <tab heading="{{ tab.display }}" 
     select="tsc.selectTab(tab.date)" 
     ng-repeat="tab in tsc.tabs"> 
     <div ng-include="'entries.html'" ng-controller="yourchildcontroller"></div> 
    </tab> 
</tabset> 


$scope.$watch('activeTabDate', function (newValue, oldValue) { 
    if (newValue !== oldValue) { 
     console.log('--'+newValue); 
    } 
}); 

EDIT si sta eseguendo l'orologio da ciascun controller scheda comunque anche con il mio primo cambio.

In questo modo il controller controllerà tutti gli elementi figlio del gruppo di tabelle e condividerà lo stesso $ scope.

<tabset justified="true" ng-controller="yourchildcontroller"> 
<tab heading="{{ tab.display }}" 
select="tsc.selectTab(tab.date)" 
ng-repeat="tab in tsc.tabs"> 
<div ng-include="'entries.html'" ></div> 
</tab> 
</tabset> 


$scope.$watch('activeTabDate', function (newValue, oldValue) { 
    if (newValue !== oldValue) { 
    console.log('--'+newValue); 
    } 
}); 

https://docs.angularjs.org/api/ng/directive/ngController