我正在使用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