离子选项卡视图状态提供者空白视图

Question

我的导航中有一个选项卡视图，但内容页面保持空白。我尝试了很多不同的 app.config 设置，但没有任何效果。我想将选项卡视图作为单独的 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 中声明为：

'tab-diary':{ 模板网址：'templates/diary.html'，控制器：'diaryCtrl' }

但是我建议检查一个工作的 Ionic "tabbed" 应用程序，例如：

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

离子选项卡视图状态提供者空白视图

Ionic Tab view State provider blank view

javascript

tabs

state

angularjs

ionic-framework