基于值加载指令

时间:2014-10-07 15:10:41

标签: javascript html angularjs angularjs-directive angularjs-scope

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

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>

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

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

提前致谢。

1 个答案:

答案 0 :(得分: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。