tem*_*lis 7 javascript html5 angularjs ionic-framework
我正在使用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标签中？
我怎么解决这个问题？
小智 13
我具有解决问题的<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>
我封装了模板(tab1.html ..) <ion-content>
templates/tab1.html
<ion-content>
<!--Your Template Content Goes here-->
</ion-content>
这个结构对我来说就像一个魅力.
http://forum.ionicframework.com/t/tabs-and-ng-include/7863/4?u=kousikraj
这是旧的，但没有发布最佳解决方案。当我仍然打开这个时，我找到了解决方案，所以我想我会做出贡献，以防其他人发现这个。您可以简单地使用 ng-include 指令作为它自己的标签
<ion-slide-box>
<ion-slide>
<ng-include src="'templates/slide1.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide2.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide3.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide4.html'"></ng-include>
</ion-slide>
</ion-slide-box>
无需在每张幻灯片中进行离子视图。
| 归档时间： |
|
| 查看次数： |
17218 次 |
| 最近记录： |