Ionic:如何在不使用抽象定义的情况下显示模板中的内容

时间:2016-06-03 15:02:03

标签: angularjs ionic-framework

这是一个很简单的问题,但我仍然在努力解决这个问题。基本上,我们的想法是拥有一个无任何ion-side-menus的登录页面。登录后,ion-side-menus将定义为abstract,它将与the starter example中的一样有效(请参阅demo)。

我已经创建了一个演示来演示什么不起作用:demo

这些是文件:

的index.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>

    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </head>

  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content class="has-header"></ion-content>
    </ion-pane>
  </body>

</html>

app.js

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

    // routing
    $stateProvider

    // start
    .state('start', {
        url: '/',
        templateUrl: 'start.html',
        controller: 'DashCtrl'
    })

    $urlRouterProvider.otherwise('/');
});

的start.html

<ion-view>
    <ion-content scroll="false">
        <div class="intro padding row row-center">
            <div class="col">
                <h1>Hello World</h1>
            </div>
        </div>
    </ion-content>
</ion-view>

controllers.js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {
})

启动/时,start.html的内容需要显示,但没有任何内容。我想我在index.html中做错了,可以使用错误的标签。

1 个答案:

答案 0 :(得分:1)

简单修复:

<ion-nav-view class="has-header"></ion-nav-view>

而不是<ion-content>内的index.html

更新plunker:http://plnkr.co/edit/Qdw2aAYM8UxI9nS71hkl?p=preview