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