Question

我尝试创建一个包含标签的离子应用这是我的标签

.state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

在聊天详细信息选项卡中，我有按钮（学生列表）应该带我到另一个视图并让我进入聊天选项卡

那么，怎么做？

这是聊天详情页面

<ion-view view-title="{{chat.name}}">
  <ion-content class="padding">
    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
    <p>
      {{chat.name}}
    </p>
    <p>
      {{chat.instructor}}
    </p>
    <ion-toggle ng-model="chat.availabe">
        Available
    </ion-toggle>
    <a class="button button-block button-royal">
        List Student
    </a>



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

Answer 1

我强烈建议你查看已经内置到ionic v1 https://ionicframework.com/docs/api/directive/ionTabs/

中的指令

Answer 2

在你的HTML中

 <button class="button button-block button-royal" ng-click="changeState()">
        List Student
 </button>

然后在你的相关控制器中（我相信它的ChatDetailCtrl，别忘了注入$ state）

$scope.changeState = function() {
        $state.go('tab.example'); // 
};

app.js

.state('tab.example', {
  url: '/example',
  views: {
    'tab-chats': {
      templateUrl: 'templates/example.html',
      controller: 'ChatDetailCtrl'
    }
  }
})

聊天详细信息状态中的新状态（离子选项卡）

2 个答案: