我有一個基本的工作示例,我想要做什麼,但採取這種方法有一個奇怪的限制。在templates/group.html
中,似乎沒有任何方法可以在ion-nav-view
之上或之下添加內容。嵌套在內容中的離子導航視圖
$stateProvider.state({
name: 'home',
url: '/',
templateUrl: 'templates/home.html'
});
$stateProvider.state({
name: 'group',
url: '/group',
templateUrl: 'templates/group.html',
abstract: true
});
$stateProvider.state({
name: 'group.home',
url: '/',
templateUrl: 'templates/group-home.html'
});
$stateProvider.state({
name: 'group.post',
url: '/post/:id',
templateUrl: 'templates/group-post.html'
});
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content>
<p>This is home.</p>
<a ui-sref="group.home">Go to a group.</a>
</ion-content>
</ion-view>
</script>
<script id="templates/group.html" type="text/ng-template">
<ion-view view-title="Group">
<ion-nav-view></ion-nav-view>
</ion-view>
</script>
<script id="templates/group-home.html" type="text/ng-template">
<ion-view view-title="Group Home">
<ion-content>
<p>This is the group home.</p>
<a ui-sref="group.post({id: 4})">Go to group post.</a>
</ion-content>
</ion-view>
</script>
<script id="templates/group-post.html" type="text/ng-template">
<ion-view view-title="Group Post">
<ion-content>
<p>This is a group post.</p>
</ion-content>
</ion-view>
</script>
我怎樣才能得到這種行爲,但也內group.html
添加一些內容?
例如:
<script id="templates/group.html" type="text/ng-template">
<ion-view view-title="Group">
<p>Some stuff here.</p>
<ion-nav-view></ion-nav-view> <!-- group child view stuff here -->
<p>Stuff here, too, if possible.</p>
</ion-view>
</script>
我可以看到爲什麼嵌套ion-nav-view
不工作了,因爲它有一個完整的屏幕一種容器的事情,但改變它的用戶界面視圖打破了父ion-nav-view ...轉換和ion-nav-bar停止工作。看起來像父母ion-nav-view
不應該介意有一個孩子ui-view
。也許這種UI只是不可能用離子?
除非提供解決方案,否則我唯一能想到的就是將應該在嵌套視圖之上或之下的內容轉換爲指令,並在每個嵌套視圖中包含指令元素。不如干,但它的作品。 – m59