Javascript 在<；下使用ui视图；md选项卡内容>；标签

我有一个使用

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>

{{cat.title}}

我为

config

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

运行代码时，您会发现单击

Home

选项卡时，

HomeController

会被调用一次，这很好。但是，当您单击其他选项卡时，例如

Tab1

，就会调用

CategoriesController

7次，每个选项卡调用一次。这可以在开发者模式的控制台中看到，我已经打印了一个文本

据我所知，这是由于出现在

下的

导致的。它为每个选项卡调用控制器。这也意味着当我想查看

Tab1

的主体时，它将从控制器进行7次计算，并实际使用

Tab1

的内容填充每个选项卡的主体，尽管它将被隐藏

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

有没有办法做到这一点

编辑 我使用下面答案中建议的解决方法编辑了JSFIDLE。但是，

CategoriesController

仍然会被调用两次。这将导致不必要的计算。有什么好办法可以避免吗

我想使用

\u willBeDestroyed

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

任何帮助都将不胜感激。

这里有一个解决方案-

这些变化是：

categoriesController

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

编辑：

---

为了避免不必要的计算，可以根据

$scope检查
$stateParams
。在控制器-
中选择选项卡
是否有任何特定的原因使用
内部选项卡？老实说，我看不出有任何理由在其中使用
ui-router
。我想为每个选项卡下的数据实例化一个新的控制器，这样当一个选项卡处于活动状态时，我就不需要担心其他选项卡下的数据。这是一个巨大的问题，因此我想在这种情况下使用ui路由器。我刚刚在这里分解了这个问题。我在这里发现了一个问题：这个问题和我的问题之间的区别是，我使用ng repeat生成了这个问题，而在另一种情况下，有单独的选项卡需要处理，这是一个很好的解决方法。但我仍然希望控制器只被调用一次。两次调用将导致不必要的计算。@为了避免不必要的计算，您可以对照
$scope.selectedTab
检查
$stateParams
。请参见编辑。