聊天详情状态(离子选项卡)中的新状态

new state inside chat details state (ionic tabs)

本文关键字：状态 新状态 聊天 选项      更新时间：2023-09-26

我尝试创建一个包含选项卡的ionic应用程序这是我的标签

.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>

我强烈建议您查看ionic v1中已经内置的指令https://ionicframework.com/docs/api/directive/ionTabs/

在你的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'
    }
  }
})
相关文章：