javascript - Ionic 选项卡 View 状态提供者空白 View

Question

我的导航中有一个选项卡 View ，但内容页面保持空白。我尝试了很多不同的 app.config 设置，但没有任何效果。我希望将选项卡 View 作为单独的 HTML 文件，因此我必须使其正常工作。 :/

index.html(应用程序的主页):

<ion-pane>
<ion-nav-bar align-title="center" class="bar-stable">
    <ion-nav-back-button></ion-nav-back-button>
    <ion-nav-title>
      <img class="titleLogo" ng-src="img/headers/logo_tabbar.png" />
    </ion-nav-title>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</ion-pane>

home.html(这是您导航到的页面):

<ion-view ng-controller="mainCtrl">
<ion-tabs class='tabs-icon-top tabs-light'>
  <ion-tab title="diary" href="#/diary">
    <ion-nav-view name="tab-diary"></ion-nav-view>
  </ion-tab>
  <ion-tab title="report" href="#/report">
    <ion-nav-view name="tab-report"></ion-nav-view>
  </ion-tab>
  <ion-tab title="rewards" href="#/rewards">
    <ion-nav-view name="tab-rewards"></ion-nav-view>
  </ion-tab>
  <ion-tab title="messages" href="#/messages">
    <ion-nav-view name="tab-messages"></ion-nav-view>
  </ion-tab>
  <ion-tab title="settings" href="#/settings">
    <ion-nav-view name="tab-settings"></ion-nav-view>
  </ion-tab>
</ion-tabs>
</ion-view>

diary.html(例如选项卡之一):

<ion-view view-title="Diary" ng-controller="diaryCtrl">
<ion-content>
    diarytest</br>
    diarytest
</ion-content>  

app.js(配置文件):

app.config(function($stateProvider, $urlRouterProvider){
  $stateProvider.state('welcome',{
    url: '/welcome',
    templateUrl: 'templates/welcome.html'
  });
  $stateProvider.state('login',{
    url: '/login',
    templateUrl: 'templates/login.html'
  });
  $stateProvider.state('register',{
    url: '/register',
    templateUrl: 'templates/register.html'
  });

  $stateProvider.state('home',{
    url: '/home',
    templateUrl: 'templates/home.html'
  });
  $stateProvider.state('diary',{
    url: '/diary',
    views:{
      'tab-diary':{
        templateUrl: 'templates/diary.html'
      }
    }
  });
  $stateProvider.state('report',{
    url: '/report',
    views:{
      'tab-report':{
        templateUrl: 'templates/report.html',
        controller: 'reportCtrl'
      }
    }
  });
  $stateProvider.state('rewards',{
    url: '/rewards',
    views:{
      'tab-rewards':{
        templateUrl: 'templates/rewards.html',
        controller: 'rewardsCtrl'
      }
    }
  });
  $stateProvider.state('messages',{
    url: '/messages',
    views:{
      'tab-messages':{
        templateUrl: 'templates/messages.html',
        controller: 'messagesCtrl'
      }
    }
  });
 $stateProvider.state('settings',{
    url: '/settings',
    views:{
      'tab-settings':{
        templateUrl: 'templates/settings.html',
        controller: 'settingsCtrl'
      }
    }
  });
  $urlRouterProvider.otherwise('/welcome');
});

Answer 1

我注意到两件事:

• <ion-view>标签未由相应的 </ion-view> 关闭结束标签

• ng-controller="diaryCtrl"直接在 ion-view 上声明，而不是在 $stateProvider 中声明为:

  “标签日记”:{ templateUrl: 'templates/diary.html', Controller :'diaryCtrl' }

但是我建议检查一个工作的 Ionic“选项卡式”应用程序，例如:

• 标签:http://codepen.io/beaver71/pen/LGZvvb
• 选项卡和侧面菜单:http://codepen.io/beaver71/pen/WrqgNm