离子侧菜单内容空白页

I took ionic side menu example and changed some parts.

我拿了离子侧菜单示例并更改了一些部分。

index.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 href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="lib/ion-gallery/dist/ion-gallery.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src="lib/ion-gallery/dist/ion-gallery.min.js"></script>
    </head>

    <body ng-app="starter">
        <ion-nav-view></ion-nav-view>
    </body>
</html>

menu.html

    <ion-side-menus enable-menu-with-back-views="false">
      <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button class="button-clear">
            <i class="icon ion-ios-arrow-forward"></i>
          </ion-nav-back-button>

          <ion-nav-buttons side="right">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
            </button>
          </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
      </ion-side-menu-content>

      <ion-side-menu side="right">
        <ion-header-bar class="bar-stable">
          <h1 class="title">test</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <ion-item menu-close class="item item-icon-right text-right" href="#/app/articles">
              <i class="icon ion-university"></i>
              articles
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>

app.js

    angular.module('starter', ['ionic', 'starter.controllers', 'ion-gallery'])
      .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
          if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);

          }
          if (window.StatusBar) {
            StatusBar.styleDefault();
          }
      });
    })

    .config(function($stateProvider, $urlRouterProvider, ionGalleryConfigProvider, $ionicConfigProvider) {
      $ionicConfigProvider.backButton.text('');
      $stateProvider
        .state('app', {
          url: '/app',
          abstract: true,
          templateUrl: 'templates/menu.html',
          controller: 'AppCtrl'
        })

        .state('app.articles', {
          url: '/articles',
          views: {
            'menuContent': {
              templateUrl: 'templates/articles.html',
            }
          }
        })

        .state('app.article-1', {
          url: '/article-1',
          views: {
            'menuContent': {
              templateUrl: 'templates/article-1.html',
            }
          }
        })
        $urlRouterProvider.otherwise('/app/articles');
    });

articles.html

<ion-view view-title="articles">
   <ion-content>
       <ion-list>
           <ion-item href="#/app/article-1">article-1</ion-item>
       </ion-list>
   </ion-content>
</ion-view>

article-1.html

<ion-view view-title="article-1">
    <ion-content class="padding text-right">
        Hello!
    </ion-content>
</ion-view>

Now when I open side menu and go to articles page in IOS and android simulators and real device, and the select article-1 item from menu, "Hello!" shows at a glance and then hide. whats the problem?

现在,当我打开侧面菜单并转到IOS中的文章页面和Android模拟器和真实设备,以及从菜单中选择第1条项目时,“你好!”一目了然然后隐藏。有什么问题?

1 个解决方案

#1

after many hours, finally I found that the problem was from a simple direction style to body.

经过几个小时,我终于发现问题是从简单的方向风格到身体。

body {
    direction: rtl;
}

after remove this style, everything is works fine!

删除此样式后,一切正常!

#1