Question

我的问题是我的指令如下：

app.directive('bottomNavBar', [function () {
return {
  templateUrl: 'views/bottomNavBar.html',
  restrict: 'A',
  replace: true,
  transclude: true
};

在bottomNavBar.html中，我们只是看起来像：

<!--more stuff above-->

<nav>
    <div ng-transclude></div>
</nav>

<!--more stuff below-->

现在我想在index.html中做的是定义这个指令，可以根据一个值加载第二个指令（我还没有决定它来自哪个 - 模型值，控制器值等等.-）

<div ng-controller="MyController">
    <div bottom-nav-bar>
         <!--Possibility of loading a directive or other one based on a value and transclude it here.-->
    </div>
</div>

我已经阅读了不同的方法，但是其中一些方法将指令的功能绑定到控制器值，我想遵循最佳实践并尝试将指令与控制器的值等隔离，以便在将来可重用

基本上我的目标是有一个导航栏并根据选项卡/复选框/任何选择加载导航栏中不同的配置和样式的不同按钮，这就是为什么我决定为每个按钮配置编写不同的指令/风格等。

提前致谢。

Answer 1

快速找到最干净的解决方案：

<div ng-controller="MyController">
    <div bottom-nav-bar>
        <div nav-button-one ng-if='!!hasNav1'></div>
        <div nav-button-two ng-if='!!hasNav2'></div>
        <div nav-button-three ng-if='!!hasNav3' color='pink'></div>
    </div>
</div>

我认为这基本上就是你所得到的。每个按钮都是它自己的指令，根据控制器是否认为应该存在，它是否存在。

另一种可能性是将子指令包含在主指令模板中，然后将main指令配置为显示与否：

<div bottom-nav-bar nav-one='true' nav-two='true' nav-three='true'></div>

我不喜欢它，但是如果你不必非常严格地配置按钮，那么每次使用main指令时代码可能会少一些。我更喜欢选项1。

基于值加载指令

1 个答案: