javascript – Ionic Framework – Angular html include

前端之家收集整理的这篇文章主要介绍了javascript – 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标签中?

我怎么解决这个问题?

解决方法

我通过< 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

原文链接:https://www.f2er.com/js/154358.html

猜你在找的JavaScript相关文章