AngularJS UI路由器：根據需求加載同級視圖

我一直在尋找如何按需實現同級視圖。到目前爲止我所取得的成果是將它們加載在一起。以下是我正在處理的示例。當點擊左側的任何項目時，會加載右側的藍色ui-view，其中包含該項目的詳細信息以及兩個命名的視圖。 項目配置和項目價格是兩個定位標籤，點擊時將顯示相應的視圖。AngularJS UI路由器：根據需求加載同級視圖

我希望描述是有用的，如果有人可以提供一個有用的解決方案。

enter image description here

視圖是紅色邊框如下（HTCOne.cshtml）

<div class="row"> 
<div class="col-md-5 "> 
    <h1>Meet HTC One M8</h1> 
</div> 

<div class="col-md-5 "> 
    <a ui-sref="SmartPhone.HTCOne.Config">See Configuration</a> 
</div> 
<div class="col-md-2"> 
    <a ui-sref="SmartPhone.HTCOne.Price">Price Range</a> 
</div> 
</div> 
<div class="row"> 
    <div class="col-md-5 "> 
     <img src="~/Content/Images/HTCM8.JPG" /> 
    </div> 

    <div class="col-md-5 "> 
     <div ui-view="Config" autoscroll=" false"></div> 
    </div> 
    <div class="col-md-2 "> 
     <div ui-view="Price" autoscroll="false"></div> 
    </div> 
</div>

UI路由器代碼

.state('SmartPhone.HTCOne', { 
    url: '/HTCOne', 
    templateUrl: '/home/HTCOne' 
}) 
.state('SmartPhone.HTCOne.Price', { 
    views: { 
     'Price': { 
      template: '<B>Ranges form $ - $</B>' 
     }, 
     'Config': { 
      templateUrl: '/home/HTCOneConfig' 
     } 
    } 
})

另一個UI的版本編寫-Router - 如果我你是我們Ë兩個不同狀態的兩個命名的意見，我得到一次顯示，像行爲相互exculsive方式

 .state('SmartPhone.HTCOne', { 
     url: '/HTCOne', 
     templateUrl: '/home/HTCOne' 
    }) 
    .state('SmartPhone.HTCOne.Price', { 
     views: { 
      'Price': { 
       template: '<B>Ranges form $ - $</B>' 
      } 
     } 
    }) 

.state('SmartPhone.HTCOne.Config', { 
    views: { 

     'Config': { 
      templateUrl: '/home/HTCOneConfig' 
     } 
    } 
})

來源

2014-04-01 Matt

UI路由器只有一個視圖本質上是一個狀態機。您只能在任何特定時間處於一種狀態（除了在兒童處於活動狀態時處於活動狀態的父狀態除外）。

在你的情況下，你不希望價格和配置在某些時候可見嗎？如果是這樣的話，使用狀態是不合適的。你應該用ng-includes代替。

更新：你真的把命名UI的意見，並在你的黑盒子是「有些配置」和「商品價格」，即

<div ui-view="Price"></div> 
<div ui-view="Config"></div>

來源

2014-04-01 05:45:18

目的是顯示在不同的價格和配置時間和選擇一個特定的錨標記 – Matt

看到我的更新，你真的把ui-views放在那裏？ –

顯示UI視圖的代碼未呈現。請參閱更新 – Matt

AngularJS UI路由器：根據需求加載同級視圖

回答

相關問題