單擊angular ui選項卡會多次觸發事件

Question

我有15個標簽使用像這樣的角度ui標簽

這是模板

<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>

這是控制器

$scope.activeTabDate = '';

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

};

現在這是entries.html的我的子控制器

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

我在頁面上有15個標簽。 我的問題是每次我點擊標簽。 在console.log中，我得到15個條目而不是一個條目。 這是為什么

Answer 1

從entries.html中刪除手動導入，並在包含entries.html的div中使用ng-controller。 然后，我認為你不需要在子控制器中使用$ scope.parent，因為范圍將與主要的一樣

<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);
    }
});

編輯您也可以通過我的第一次更改從每個標簽控制器執行手表。

這樣控制器將控制tabset的所有子元素並共享相同的$ 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