带有嵌套视图的离子侧菜单和选项卡:选项卡嵌套视图的内容未显示

Posted

技术标签:

【中文标题】带有嵌套视图的离子侧菜单和选项卡:选项卡嵌套视图的内容未显示【英文标题】:Ionic side menu and tabs with nested views: content of tab nested views not showing 【发布时间】:2015-08-15 06:00:25 【问题描述】:

我是 AngularJSIonic 的新手。

我正在创建一个在其中一个菜单选项中同时具有 sidemenutabs 的应用程序。选项卡应使用nested view 呈现其内容,因此这里没有普通的html

我可以在侧边菜单选项和所有作品之间导航并正确呈现。当我进入承载选项卡的菜单选项时,问题就来了。

虽然标签导航面板正确呈现并且我可以在标签之间导航,但不知何故,标签的内容被创建但仍然不可见。如果我执行ionic serve 并使用Firebug 或类似方法检查生成的HTML,我可以看到生成的nested view 的内容。只是我在浏览器上看不到它。这在ChromiumFirefox 都发生在我身上,所以浏览器应该不是问题。尝试使用 android 模拟器时也会发生同样的情况。

我首先想到了routing 的问题,但这对我来说没有太大意义,因为内容是生成的(只是不可见)。

我创建了一个Plunkr,并将我的代码减少到最少,以便重现问题。无论如何,我的(相关)代码如下:

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" name="viewport" />
    <title></title>

  <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/nightly/css/ionic.css">

  <link href="app.css" rel="stylesheet">

  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="app.js"></script>
    <script src="services.js"></script>
    <script src="controllers.js"></script>
  </head>

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

</html>

app.js

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

.run(function($ionicPlatform) 
  $ionicPlatform.ready(function() 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) 
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    
    if (window.StatusBar) 
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    
  );
)

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

  .state('app', 
    url: "/app",
    abstract: true,
    templateUrl: "menu.html",
    controller: 'AppCtrl'
  )

  .state('app.questionsAnswers', 
    url: "/questionsAnswers",
//    abstract: true,
    views: 
      'menuContent': 
        templateUrl: "questionsAnswers.html"//,
//        controller: 'questionsAnswersCtrl'
      
    
  )

  .state('app.questionsAnswers.recent', 
    url: "/recent",
    views: 
      'recent-questions': 
        templateUrl: "recentQuestionsAnswers.html",
        controller: 'recentQuestionsAnswersCtrl'
      
    
  )

  .state('app.questionsAnswers.mostVoted', 
    url: "/mostVoted",
    views: 
      'most-voted-questions': 
        templateUrl: "mostVotedQuestionsAnswers.html",
        controller: 'mostVotedQuestionsAnswersCtrl'
      
    
  )

  .state('app.questionsAnswers.random', 
    url: "/random",
    views: 
      'random-questions': 
        templateUrl: "randomQuestionsAnswers.html",
        controller: 'randomQuestionsAnswersCtrl'
      
    
  )


    .state('app.foo', 
      url: "/foo",
      views: 
        'menuContent': 
          templateUrl: "foo.html",
          controller: 'fooCtrl'
        
      
    );
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/foo');
);

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>
      </ion-nav-back-button>

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

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
                <ion-item nav-clear menu-close href="#/app/questionsAnswers">
          Questions & Answers
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/foo">
          Foo
        </ion-item>        
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

questionsAnswers.html

<ion-view view-title="Questions & Answers">
  <ion-content>
    <h1>Questions & Answers</h1>
        <ion-tabs class="tabs-positive tabs-icon-only">

          <ion-tab title="Recent" ui-sref="app.questionsAnswers.recent" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                <ion-nav-view name="recent-questions"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Most voted" ui-sref="app.questionsAnswers.mostVoted" icon-on="ion-arrow-up-c" icon-off="ion-arrow-up-a">
                <ion-nav-view name="most-voted-questions"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Random" ui-sref="app.questionsAnswers.random" icon-on="ion-help-circled" icon-off="ion-help">
                <ion-nav-view name="random-questions"></ion-nav-view>
          </ion-tab>

        </ion-tabs>
  </ion-content>
</ion-view>

我的SSCCE 中的其余HTML 文件只是该类型的普通视图:

<ion-view view-title="foo">
  <ion-content>
    <ion-list>
      foo content
    </ion-list>
  </ion-content>
</ion-view>

controllers.js 在示例中并不真正相关,因为所有控制器基本上什么都不做(当然在实际应用中它们都有自己的功能)。

我在 SO 和其他网站上阅读了很多问题和答案,但似乎找不到我做错了什么。问题是:为什么我的选项卡中的嵌套视图呈现但仍然不可见?

【问题讨论】:

我没有时间进一步调查,但添加到每个 ion-content style="height: 100%;"解决您的问题 感谢您的评论@aorfevre,但我会使用给定的答案。无论如何,使用那个 CSS 技巧可以“解决”它是非常奇怪的。 :-) 【参考方案1】:

您的ion-view 问答 (questionAnswers.html) 不能包含&lt;ion-content&gt; 元素,因为您已经在每个子目录中设置了&lt;ion-content&gt;查看。

前:

<ion-view view-title="Most voted questions and answers">
  <ion-content>
    <h1>Most voted Questions</h1>
  </ion-content>
</ion-view>

所以你的 questionAnswers.html 应该是:

<ion-view view-title="Questions & Answers">
        <ion-tabs class="tabs-positive tabs-icon-only tabs-top">

          <ion-tab title="Recent" ui-sref="app.questionsAnswers.recent" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                <ion-nav-view name="recent-questions">
                </ion-nav-view>
          </ion-tab>

          <ion-tab title="Most voted" ui-sref="app.questionsAnswers.mostVoted" icon-on="ion-arrow-up-c" icon-off="ion-arrow-up-a">
                <ion-nav-view name="most-voted-questions"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Random" ui-sref="app.questionsAnswers.random" icon-on="ion-help-circled" icon-off="ion-help">
                <ion-nav-view name="random-questions"></ion-nav-view>
          </ion-tab>

        </ion-tabs>
</ion-view>

这是plunker。

【讨论】:

很高兴我能帮上忙。干杯。

以上是关于带有嵌套视图的离子侧菜单和选项卡:选项卡嵌套视图的内容未显示的主要内容,如果未能解决你的问题,请参考以下文章

Catel 中的嵌套验证

当返回到“导航架构组件”中的同一选项卡时,嵌套片段的状态会丢失

Ionic 2:添加新的动态选项卡后刷新选项卡视图

Ionic 4 路由到带有选项卡的视图会触发整页重新加载

带有中继器的嵌套选项卡 - 高级自定义字段 Wordpress

Flutter:带有嵌套导航的底部导航栏和更改选项卡时恢复根页面