单击 angular ui 选项卡多次触发事件

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;

};

现在这是我 entries.html

的子控制器

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

我在页面上有 15 个标签。我的问题是每次我点击 tab 。在 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

单击 angular ui 选项卡多次触发事件

Clicking on angular ui tabs fires event many times

javascript

tabs

angularjs

angular-ui-bootstrap