在子状态下嵌套视图

问题描述：

在我的Ionic应用程序中，我有一个页面“order.html”处于子状态。我想让这个页面加载另外两个页面（“orderheaderdetail.html”和“orderitemdetail.html”）。我定义了“ui-view”来加载另外两页（例如“orderheaderdetail”和“orderitemdetail”）。我不知道这是否是正确的做法。但它似乎不起作用。 “A”页的HTML是如下：在子状态下嵌套视图

<ion-view title="Order"> 
    <div ng-controller="OrderDetailController"> 
     <ion-content> 
      <div layout="row"> 
       <div class="panel" flex="70" flex="100" flex-sm="70"> 
        <div class="panel" flex="90"> 
         <div ui-view="orderheaderdetail"> 
         </div> 
         <div ui-view="orderitemdetail"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </ion-content> 
    </div> 
</ion-view>

虽然路由代码如下：

.state('protected.order', { 
      url: '/order/:_id/', 
      views : { 
       'menuContent' : { 
         templateUrl: 'templates/order.html', 
         controller: 'OrderDetailController' 
       }, 

       'orderheaderdetail' : { 
         templateUrl: 'templates/orderheaderdetail.html', 
         controller: 'OrderDetailController' 
       }, 
       'orderitemdetail' : { 
         templateUrl: 'templates/orderitemdetail.html', 
         controller: 'OrderDetailController' 
       },    
      } 
     })

我无法改变“order.html”的状态改变成抽象的，因为它必须是在孩子状态。所以基本上就像一个有其他孩子状态的孩子状态。任何想法如何解决这个问题？谢谢

答

您可以为要加载的ui视图定义一个更多的状态。 YOu应该使用$state.go('protected.order.detail')转到该视图。

.state('protected.order', { 
     url: '/order/:_id', 
     views : { 
      'menuContent' : { 
        templateUrl: 'templates/order.html', 
        controller: 'OrderDetailController' 
      }    
     } 
    }) 
.state('protected.order.detail', { 
     url: '/detail', 
     views: { 
      'orderheaderdetail' : { 
        templateUrl: 'templates/orderheaderdetail.html', 
        controller: 'OrderDetailController' 
      }, 
      'orderitemdetail' : { 
        templateUrl: 'templates/orderitemdetail.html', 
        controller: 'OrderDetailController' 
      } 
     } 
})

谢谢是的，它的工作，但我认为我需要创建两个新的控制器，而不是OrderDetailController – nadinugraha

是的，这就是问题，当你在你的状态定义视图，你不能定义一个公共控制器 –

答

你的孩子的意见应与@参考定义，像这样

  '[email protected]' : { 
        templateUrl: 'templates/orderheaderdetail.html', 
        controller: 'OrderDetailController' 
      }, 
      '[email protected]' : { 
        templateUrl: 'templates/orderitemdetail.html', 
        controller: 'OrderDetailController' 
      },

我不知道这是否应该是[email protected]@order或[email protected]虽然。所以你应该尝试两个

在子状态下嵌套视图

相关推荐