Javascript 离子框架-角度html包括_Javascript_Angularjs_Html_Ionic Framework

Javascript 离子框架-角度html包括

javascript angularjs html ionic-framework

Javascript 离子框架-角度html包括,javascript,angularjs,html,ionic-framework,Javascript,Angularjs,Html,Ionic Framework,我正在用Ionic框架构建一个应用程序。我正在使用选项卡导航 angular.module('myapp', ['ionic']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html"

我正在用Ionic框架构建一个应用程序。我正在使用选项卡导航

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"
            }
        }
    })....

首先，我在一个html文件中编写了所有代码，然后为了更好地监督，我想使用html包括：

<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标签中

如何解决此问题？

的工作原理如下： -在/templates文件夹中的template.html文件中，删除脚本标记

<!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');

});

//离子启动器应用程序，v0.9.20
//angular.module是创建、注册和检索angular模块的全局位置
//“starter”是此角度模块示例的名称（也在index.html中的属性中设置）
//第二个参数是“requires”的数组
//可以在services.js中找到“starter.services”
//可以在controllers.js中找到“starter.controllers”
angular.module（'starter'、['ionic'、'starter.Controller'、'starter.services']））
.run（函数（$ionicPlatform）{
$ionicPlatform.ready（函数（）{
StatusBar.styleDefault（）；
});
})
.config（函数（$stateProvider，$urlRouterProvider）{
//Ionic使用AngularUI路由器，它使用状态的概念
//在此处了解更多信息：https://github.com/angular-ui/ui-router
//设置应用程序可以处于的各种状态。
//每个州的控制器都可以在controllers.js中找到
$stateProvider
//设置tabs指令的抽象状态
.state（'tab'{
url:“/tab”，
摘要：没错，
templateUrl:“templates/tabs.html”
})
//每个选项卡都有自己的导航历史堆栈：
.state（'tab.dash'{
url:“/dash”，
观点：{
“制表符”{
templateUrl:'templates/tab dash.html'，
控制器：“DashCtrl”
}
}
})
.state（'tab.friends'{
url:“/friends”，
观点：{
“tab friends”：{
templateUrl:'templates/tab friends.html'，
控制器：“FriendsCtrl”
}
}
})
.state（'tab.friend detail'{
url:“/friend/：friendId”，
观点：{
“tab friends”：{
templateUrl:'templates/friend detail.html'，
控制器：“FriendDetailCtrl”
}
}
})
.state（'tab.account'{
url:“/account”，
观点：{
“选项卡帐户”：{
templateUrl:'templates/tab account.html'，
控制器：“AccountCtrl”
}
}
})
//如果上述状态均不匹配，则将其用作回退
$urlRouterProvider。否则（'/tab/dash'）；
});

我通过在

中加入

解决了这个问题。这是您可能需要尝试的结构

<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>

这个结构对我来说很有魅力

这是旧的，但最佳解决方案尚未发布。我找到了解决方案，而我仍然有这个开放，所以我想我会作出贡献，以防其他人发现这一点。您可以简单地使用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>

每张幻灯片中不需要使用离子视图。

您看过离子的标签模板了吗？它完美地展示了如何处理选项卡和不同的html文件。只需键入ionic starter myApp选项卡并查看生成的文件。天哪，我很笨。。。谢谢它已经在代码中..我将模板移动到/template文件夹，并从正文中删除包含的标记

<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>