Question

本周我刚开始学习Angular + Ionic。我想做的是得到这样的东西：http://codepen.io/calendee/pen/IAjoL。

除此之外，我想在选项卡页面的导航栏中有一个“后退”按钮，它会将我带回登录页面。即我正在尝试获取登录页面，并将选项卡页面作为单独导航堆栈的一部分。

我尝试过几件事，但在所有情况下我都只能a）渲染后退按钮，b）获取每个标签中显示的内容。不是都。任何帮助将不胜感激！

谢谢， Saswat

Note: I'm not sure why, but Stack Overflow apparently needs some code for a codepen link. So here it is.

Answer 1

我是Taqtile团队的一员，他们开发了Pontofrio's mobile site（一个着名的巴西零售品牌），它与您所寻找的产品具有非常相似的效果，我们使用angularjs完成了这项工作。

我们只使用css作为stacks元素位置/动画（基本上就是你的代码笔代码）但是视图持久性的技巧只是使用ui-router来保持旧视图状态的活跃状态你那么搬家。

哦，它还允许用户使用后退按钮或滑动（使用hammerjs和angular-hammer返回状态 - 当我们开发它时，最后一个稳定的angularjs释放仍为1.1.5，所以我们遗憾地没有开箱即用的所有触摸事件......）

Answer 2

实际上很容易。您需要添加另一个父状态，这将是您的登录表单。并且，让标签跟随另一个父状态将具有导航后退按钮。下载选项卡的离子启动器应用程序并更改app.js，controller.js和tabs.html。创建signin.html，以了解流程。

//app.js  

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
   $stateProvider
           .state('signin',{
               url: '/signin',
               templateUrl: 'templates/signin.html',
               controller: 'signInCtrl'
           })
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    templateUrl: 'templates/tabs.html',
    controller: 'TabCtrl'
  })

  // Each tab has its own nav history stack:

  .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('/signin');

});

在signin.html中

<ion-view title="'Sign-In'" left-buttons="leftButtons" right-buttons="rightButtons">
        <ion-content has-header="true">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">Username</span>
              <input type="text" ng-model="user.username">
            </label>
            <label class="item item-input">
              <span class="input-label">Password</span>
              <input type="password" ng-model="user.password">
            </label>
          </div>
          <div class="padding">
            <button class="button button-block button-positive" ng-click="signIn(user)">
              Sign-In
            </button>
            <p class="text-center">
              <a href="#/forgot-password">Forgot password</a>
            </p>
          </div>
        </ion-content>
      </ion-view>

在tabs.html中

<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-view>
 <ion-content>
     <button class="button button-positive" ng-click="GoBack()">back</button>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>


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

在Controller.js

中

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})
.controller('TabCtrl',function($scope,$state){ 
    $scope.GoBack = function(){$state.go('signin')};
})
.controller('signInCtrl',function($scope,$state){ 
    $scope.signIn = function(user){$state.go('tab');}
})
.controller('ChatsCtrl', function($scope, Chats) {
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  };
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

角度+离子：多个导航堆栈

2 个答案: