如何在路由器的視圖中實現視圖
[英]How to implement views in views for router
問題描述
使用UI-Router ，我可以在一台路由器中具有多個ui-view ，但是如果我想在一個ui-view之一中具有多個ui-view呢？ 看一下我的例子：
<html>
<body ng-app='app'>
<div ui-view='orders'></div>
<div ui-view='contacts'></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<script type="text/javascript">
angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('customer', {
url: '/',
views: {
'orders': {
template:'<div>orders</div> <div ui-view="purchaseOrder"></div> <div ui-view="addresses"></div>',
views: {
'purchaseOrder': {template: '<span>purchaseOrder</span>'},
'addresses': {template: '<span>addresses</span>'}
}
},
'contacts': {
template: '<div> contacts</div>'
}
}
})
});
</script>
</body>
</html>
我確實可以按上述方式工作，但是嵌套在視圖中的視圖從未在頁面上顯示。 任何人都有想法在視圖中進行查看嗎？
1 個解決方案
解決方案1
1 2015-05-07 12:02:06
通常，狀態定義的概念是：
...
views:
{
views : { ... }
}
不支持。 但是我們可以將其視為語法問題。 因為我們可以將其更改為
// state 'index'
...
views:
{
'': { ... place holder for other views ...}
'targetA@index' : { ... injects into above view ... }
'targetB@index' : { ... injects into above view ... }
}
我建議檢查一下這個問答（有一個有效的示例 ） ：
Angular UI Router-具有多種布局的嵌套狀態
重點是介紹一種特殊的view ，並具有整體layout 。 該layout.html內容可能是：
<div>
<section class="top">
<div ui-view="top"></div>
</section>
<section class="middle">
<section class="left">
<div ui-view="left"></div>
</section>
<section class="main">
<div ui-view="main"></div>
</section>
</section>
</div>
現在，我們將把這個view作為state的主視圖 ，其他視圖將被注入到layout.html ：
.state('index', {
url: '/',
views: {
// this goes into index.html ui-view
'@' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
// these are injected into layout.html
// check the absolute naming 'top@index'
'top@index' : { templateUrl: 'tpl.top.html',},
'left@index' : { templateUrl: 'tpl.left.html',},
'main@index' : { templateUrl: 'tpl.main.html',},
},
})
在此處閱讀有關絕對命名的更多信息：
如何使用backbone.js路由器切換視圖？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.