点击angular ui tabs多次触发事件

Question

我有15个像这样使用angular 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;
};

现在这是我的条目。html的子控制器

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

页面上有15个标签。我的问题是每次我点击标签。在console.log中，我得到15项而不是1项。为什么

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