負載指令

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> 

我認爲這基本上是你是得到什麼。每個按鈕都是它自己的指令，根據控制器是否認爲它應該是，它可能存在或不存在。

另一種可能性是包括在主指令模板子指令，然後配置主指令來顯示或不：

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

我不喜歡它儘可能多的，但它的潛在如果您不必非常嚴格地配置按鈕，則每次使用主指令時都會減少代碼。我更喜歡選項1.