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中声明为：

＆＃39;制表日记＆＃39;：{ templateUrl：＆＃39; templates / diary.html＆＃39;，控制器：＆＃39; diaryCtrl＆＃39; }

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

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

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

1 个答案: