我正在使用Ionic Framework构建应用程序.我正在使用标签导航.
angular.module('myapp',['ionic'])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tabs',{
url: "/tab",abstract: true,templateUrl: "templates/tabs.html"
})
.state('tabs.home',{
url: "/home",views: {
'home-tab': {
templateUrl: "templates/home.html",controller: 'HoMetabCtrl'
}
}
})
.state('tabs.news',{
url: "/news",views: {
'news-tab': {
templateUrl: "templates/news.html"
}
}
})....
首先我在1个html文件中编写了所有代码,然后为了更好的监督,我想使用html include：
<body>
<!-- Layout Setup -->
<ion-nav-bar class="bar-app"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<div ng-include="'sub/tabs.html'"></div>
</script>
<script id="templates/home.html" type="text/ng-template">
<div ng-include="'sub/home.html'"></div>
</script>
<script id="templates/news.html" type="text/ng-template">
<div ng-include="'sub/news.html'"></div>
</script>
....
home.html的：
<ion-view view-title="" hide-nav-bar="true">
<ion-content class="padding app-home" scroll="false">
<div class="app-image">
<img class="full-image" src="img/app-logo.svg">
</div>
<div class="row app-home-buttons">
<div class="col">
<a href="#/tab/news">
<button class="button button-balanced button-block icon-top"><i class='icon ion-ios-paper-outline'></i><span>News</span>
</button>
</a>
</div>
</ion-content>
</ion-view>
news.html：
<ion-view view-title="News" ng-controller="NewsRefreshCtrl">
<ion-content class="">
<ion-refresher on-refresh="doRefresh()">
</ion-refresher>
<div class="list">
<a class="item item-thumbnail-left item-text-wrap" href="#">
<img src="img/tile-icon.png">
<h2>Lorem consetetur sadipscing</h2>
<p>Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,sed diam voluptua. At v</p>
</a>
</a>
</div>
</ion-content>
</ion-view>
现在我遇到了网站标题栏不再有效的问题.它没有显示标题,并且包含的html内容位于栏下方.
也许这就是因为现在包括它在div标签中？
我怎么解决这个问题？
解决方法
我通过< div ng-include ...>解决了这个问题.内部< ion-view>在< ion-tab>内这是您可能需要尝试的结构
<ion-pane>
<ion-tabs>
<ion-tab title="Tab 1"...>
<ion-view>
<div ng-include src="'templates/tab1.html'"></div>
</ion-view>
</ion-tab>
<ion-tab title="Tab 2"... >
<ion-view>
<div ng-include src="'templates/tab2.html'"></div>
</ion-view>
</ion-tab>
</ion-tabs>
</ion-pane>
我在< ion-content>中封装了模板(tab1.html ..)
模板/ tab1.html
<ion-content> <!--Your Template Content Goes here--> </ion-content>
这个结构对我来说就像一个魅力.
http://forum.ionicframework.com/t/tabs-and-ng-include/7863/4?u=kousikraj