【问题标题】:new state inside chat details state (ionic tabs)聊天详细信息状态中的新状态(离子标签)
【发布时间】:2017-03-07 20:59:35
【问题描述】:

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

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

【问题讨论】:

    标签: javascript angularjs ionic-framework


    【解决方案1】:

    在你的 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】:

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

      【讨论】: