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

Question

我有一个 angular material 选项卡列表，这些选项卡是使用 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 次，每个选项卡一次。这可以在开发者模式的控制台中看到，我已经在其中打印了一段文本。

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

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

有办法实现吗？

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

我想到了使用 _willBeDestroyed 属性来防止调用控制器。但是这个属性在controller调用之前不在我手里

任何帮助将不胜感激。

Answer 1

这是一个解决方案 - JsFiddle

变化是：

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

categoriesController 现在最多只被调用两次，但重要的是只有所选选项卡（选项卡 2）的主体被填充，如您所见：

编辑：

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

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

Use ui-view under <md-tab-content> tag

javascript

angularjs

angular-ui-router

angular-material