在菜單中選擇一個選項顯示不同的模板

Question

我試圖在選擇菜單選項時顯示不同的模板。我可以顯示它，但是我希望菜單與菜單列表中選擇的相應模板一起顯示（即，我希望在相同頁面上選擇菜單和相應的選項）。當我更改菜單選項時，只有選項模板必須更改並加載不同的模板，並仍然顯示菜單。

希望你有想法。有人可以建議一種方式嗎？謝謝。

下面是我的代碼：

UI路由

​​

---

主HTML

<div class="icon-bar" ui-view="main"> 
<a ui-sref="settings" class="item"> 
     <i class="fa fa-cog" style="font-size:48px;"></i> 
     <label>Settings</label> 

---

設置HTML

<div ui-view="settingsControlPanel"></div> 

---

菜單HTML

<div class="panel settings-panel panel-primary"> 
    <div class="panel-heading" align="center">Settings</div> 
    <ul> 
     <li><a ui-sref="truckSettings"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</a></li> 
     <li><a ui-sref="trailerSettings"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</a></li> 
</ul> 

</div> 
<div ui-view="truckSettings"></div> 
<div ui-view="trailerSettings"></div> 

---

卡車設置HTML

<div class="panel truck-settings-panel panel-primary"> 
    <div class="panel-heading">Truck Settings</div> 

    <table class="table truck-settings-table table-bordered table-condensed table-striped"> 

     <tr> 
      <th>Model: </th> 
      <td class="list-truck-settings-data"></td> 
     </tr> 

     <tr> 
      <th> 
       Make Month & Year: 
      </th> 
      <td class="list-truck-settings-data"></td> 
     </tr> 
</table> 
</div> 

個

---

拖車設置HTML

<div class="panel trailer-settings-panel panel-primary"> 
     <div class="panel-heading">Trailer Settings</div> 

     <table class="table trailer-settings-table table-bordered table-condensed table-striped"> 

      <tr> 
       <th>Model: </th> 
       <td class="list-trailer-settings-data"></td> 
      </tr> 

      <tr> 
       <th> 
        Make Month & Year: 
       </th> 
       <td class="list-trailer-settings-data"></td> 
      </tr> 
    </table> 
    </div> 

Answer 1

我發現這是一個選項，上面貼出的問題。我們可以簡單地使用ng-show來觸發視圖，而控制器仍然綁定到路由器中的每個視圖。

菜單HTML

<div class="panel settings-panel panel-primary"> 
    <div class="panel-heading" align="center">Settings</div> 
    <ul> 
     <li><a ng-click="truck=true; trailer=false"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</a></li> 
     <li><a ng-click="truck=false; trailer=true"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</a></li> 
</ul> 

</div> 
<div ui-view="truckSettings" ng-show="truck"></div> 
<div ui-view="trailerSettings" ng-show="trailer"></div> 

Answer 2

如果您不需要路由到個人頁面，而是滿足於僅僅切換和關閉從相同的控制器查看HTML的不同部分，你可以使用ng-includes。點擊菜單可以將特定包含的變量設置爲打開或關閉，使其可見或不可見。

實施例：

菜單HTML

<div class="panel settings-panel panel-primary"> 
    <div class="panel-heading" align="center">Settings</div> 
    <ul> 
     <li ng-click="showTruck = true; showTrailer = false;"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</li> 
     <li ng-click="showTruck = false; showTrailer = true;"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</li> 
</ul> 

</div> 
<div ng-if="showTrailer" ng-include="path/to/trailerSettingsTemplate.html"></div> 
<div ng-if="showTruck" ng-include="path/to/truckSettingsTemplate.html"></div> 

理想地，該菜單中點擊邏輯應在其設定的所有值假的控制器的方法，只有一個要顯示爲真。

此模式不使用路由，因此如果您希望用戶能夠使用歷史記錄進行導航，則無法使用。但是如果你不需要每個子視圖的單獨控制器，包含將會完成這項工作。

Angular docs for ngInclude