[英]Ionic Framework - Angular html include
我正在使用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标签中？
我怎么解决这个问题？
我通过<ion-tab> <ion-view>内的<ion-tab> <div ng-include...>解决了这个问题。 这是您可能需要尝试的结构
<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> templates/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
这是旧的，但没有发布最佳解决方案。 我找到了解决方案，而我仍然打开了这个，所以我想我会做出贡献以防其他人发现这个。 您可以简单地使用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>
每张幻灯片都不需要离子视图。
像这样工作：-template .html文件在/ templates文件夹中，删除脚本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
App.js：
// Ionic Starter App, v0.9.20
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
StatusBar.styleDefault();
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
离子框架-Angular：在我的HTML代码中包含库不起作用
[英]Ionic framework - Angular: include libraries in my html code is not working
使用ionic框架和angular js在html中动态设置类属性
[英]Dynamically set class attribute in html with ionic framework and angular js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.