Question

我的离子应用中加载的第一个页面是一个欢迎屏幕，其中有两个标签链接到“登录”页面和“注册”页面。首次加载应用程序时，第一个选项卡已突出显示，当我单击该选项卡时，它不会加载相应的页面。但是，我可以单击第二个选项卡，按预期加载正确的页面，然后导航回原始视图后，我可以选择第一个选项卡，按预期加载相应的页面。我一直绞尽脑汁寻找，直到头部砰砰作响。我仍然是angularjs，javascript和MVC的新手。如果有人能够让我知道我做错了什么，那么你的指导将会非常感激。这是我的欢迎屏幕的html和我的包含我的路线的app.js文件的codepen的链接。

在我的搜索中，我看到了类似的问题，提到使用state.go和ui-sref，但我只是在试图理解如何实现我的情况的可能解决方案时变得更加迷茫和困惑。

<ion-view view-title="Login" hide-nav-bar="true">
 <ion-content class="padding splash">
 </ion-content>
</ion-view>

<ion-tabs class="tabs-dark" ng-app='starter"'>
 <ion-tab title="Log in" href="#/loginScreen"></ion-tab>
 <ion-tab title="Sign up" href="#/signUpScreen"></ion-tab>
</ion-tabs>

和js代码：

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

.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.styleLightContent();
    }
  });
})

.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

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

  // 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.profile', {
    url: '/profile',
    views: {
      'tab-profile': {
        templateUrl: 'templates/tab-profile.html',
        controller: 'ProfileCtrl'
      }
    }
  })
  .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('login', {
      url: '/login',
          templateUrl: 'templates/login.html',
          controller: 'LoginCtrl'
  })

    .state('loginScreen', {
      url: '/loginScreen',
      templateUrl: 'templates/loginScreen.html',
      controller: 'LoginScreenCtrl'
    })

    .state('signup', {
      url: '/signUpScreen',
      templateUrl: 'templates/signUpScreen.html',
      controller: 'SignupCtrl'
  })


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

});

请参阅CodePen上的Grant Desselle（@floodzonestudios）的Pen LpGXJg。

Ionic未加载第一次单击时链接到选项卡的视图

0 个答案: