Question

我有一个使用ng-repeat生成的角度材质标签列表。

<md-tabs>
    <md-tab label="Home" ui-sref="home">
        <md-tab-body>
            <div ui-view="home"></div>
        </md-tab-body>
    </md-tab>
    <md-tab ng-repeat="cat in categories" label="{{cat.title}}" ui-sref="category({categoryName:cat.title, catID:cat.catID})">
        <md-tab-body>
            <h3>
                {{cat.title}}
            </h3>
            <div ui-view="categories"></div>
        </md-tab-body>
    </md-tab>
</md-tabs>

我为config函数中的每个视图提供了单独的控制器。

Refer this link for the code

当您运行代码时，您会发现在点击Home标签时，HomeController会被调用一次，这很好。但是，当您点击其他标签时，请说Tab1，CategoriesController会被调用7次，每个标签一次。这可以在我打印出文本的开发者模式的控制台中看到。

我知道这是<div ui-view></div> <md-tab-body></md-tab-body>下Tab1的结果。它为每个选项卡调用控制器。这也意味着当我想查看Tab1的主体时，它将从控制器进行7次计算，并实际用CategoriesController的内容填充每个标签的主体，尽管它将被隐藏。

我不希望这种情况发生。单击选项卡时，只能调用控制器的一个实例，并且只能填充该选项卡的内容。

有没有办法实现这个目标？

修改我使用下面答案中建议的解决方法编辑了jsFiddle here。但是，_willBeDestroyed仍被调用两次。这将导致不必要的计算。有没有好办法避免它？

我想过使用textConnection属性来阻止调用控制器。但是在调用控制器之前，这个属性并不在我手中。

任何帮助都将深表感谢。

Answer 1

这是一个解决方案 - JsFiddle

变化是：

<md-tabs md-selected="selectedTab">
<div ui-view="categories" ng-if="selectedTab===cat.catID">

categoriesController现在最多只调用两次，但重要的部分是只填充所选标签（标签2）的正文，如下所示：

编辑：

为了避免不必要的计算，可以针对控制器中的$stateParams检查$scope.selectedTab - Fiddle

在<md-tab-content>标记下使用ui-view

1 个答案: