AngularJS如何加载模板宽度控制器并重用它？

我有以下代码：

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == 'fundoCaixa'">
    <div ng-if="sub.view=='fundoCaixa'" ng-controller="vender-fundoCaixa">
        <div ng-include="'views/vender/fundoCaixa.html'"></div>
    </div>
</div>

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == 'sangria'">
    <div ng-if="sub.view=='sangria'" ng-controller="vender-sangria">
        <div ng-include="'views/vender/sangria.html'"></div>
    </div>
</div>

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == 'apelido'">
    <div ng-if="sub.view=='apelido'" ng-controller="vender-apelido">
        <div ng-include="'views/vender/apelido.html'"></div>
    </div>
</div>

但是，如果您看到所有子视图的规则都是相同的，那么我需要重用它，如何才能做到这一点

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == '$var_here'">
    <div ng-if="sub.view=='$var_here'" ng-controller="$var_here">
        <div ng-include="'views/vender/$var_here.html'"></div>
    </div>
</div>

如果此处有$var_请更改要加载的上下文

---

谢谢大家

您不需要使用动态控制器。将代码放入带有模板的指令中。您的代码可能如下所示（例如）：

每个指令都有自己的控制器（因此不需要动态分配它们）加上模板url，这样就消除了ng include。

---

您可以尝试如何使用ng if。您想在控制器中使用三个不同的变量并将其赋值为true/false，还是像示例中那样进行检查。

您是否尝试过使用指令？您可以编写三条指令并使用transclude重用相同的html代码。小更新：在我看来，您甚至不需要transclude。如果条件足够的话，只需在不同的ng下使用一个指令和三个指令。我将尝试使用directivelook，它可以部分工作。现在的问题是：无法动态加载控制器，我正在跟踪并且没有调用控制器。看，我的问题是使用动态控制器显示动态视图，因为我需要一个单独的控制器上下文。“萨格里亚”是一个语境，“阿皮利多”是另一个语境。我需要处理这些信息。您有一个用于整个视图的父控制器。每个指令都可以有一个控制器，它有自己的逻辑，为您提供独立的上下文。如果需要，您可以通过传递参数来设置与这两个控制器的通信。我可能不完全理解您需要实现什么，以及除了为这三个上下文进行代码优化之外，是否还有其他任何理由动态加载控制器。是否要创建一些配置文件以列出控制器并自动分配它们？或者仅仅根据条件加载其中一个就足够了吗？如果您计划在一个视图中只使用三个选项，那么实际上没有必要使事情过于复杂。

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == '$var_here'">
  <fundo-caixa ng-if="ctrl.fundoCaixa"></fundo-caixa>
  <sangria ng-if="ctrl.sangria"></sangria>
  <apelido ng-if="ctrl.apelido"></apelido>
</div>