AngularJS UI路由器：按需加载兄弟视图

Question

我一直在寻找如何按需实现兄弟视图。到目前为止我所取得的成就是将它们装在一起。以下是我正在研究的样本。 单击左侧的任何项目时，将加载蓝色的右侧ui-view，其中包含项目的详细信息以及两个命名视图。 商品配置和商品价格是两个锚标签，点击后会显示相应的视图。

我希望说明有用，如果有人能提供有用的解决方案。

视图是针对红色边框编写的，如下所示（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 - 如果我对两个命名视图使用两种不同的状态，我一次只能显示一个视图，就像表现出相互冲动的方式

     .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'
         }
     }
 })

Answer 1

UI路由器本质上是一个状态机。 您在任何特定时间只能处于一种状态（除了在子状态处于活动状态时处于活动状态的父状态）。

在您的情况下，您不希望价格和配置在某些时候可见吗？如果是这种情况，使用状态是不合适的。你应该使用ng-includes。

更新： 你真的把你的黑盒子放在你的黑盒子的位置吗？＃34; Some Configuration＆＃34;以及＆＃34;项目价格＆＃34;，即

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