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

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

1 个答案: