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

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 的正文时，它将从控制器进行 7 次计算，并实际上用Tab1 的内容填充每个选项卡的正文，尽管它会被隐藏。

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

有没有办法做到这一点？

编辑 我使用下面答案中建议的解决方法编辑了 jsFiddle here。但是，CategoriesController 仍然被调用了两次。这将导致不必要的计算。有什么好的方法可以避免吗？

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

任何帮助将不胜感激。

Answer 1

这是一个解决方案 - JsFiddle

变化是：

• <md-tabs md-selected="selectedTab">

• <div ui-view="categories" ng-if="selectedTab===cat.catID">

categoriesController 现在最多只能被调用两次，但重要的是，如您所见，仅填充了选定选项卡（选项卡 2）的正文：

编辑：

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