Question

我正在使用Ionic框架，我有一个标签界面，它使用带模板的路由。出于某种原因，无论我放入$ location.path的URL，它都不会路由到正确的位置。我使用的是我之前使用的相同网址，但我从未遇到过任何问题，所以我不明白为什么它不起作用。

这是我的tabs.html（设置标签无效）：

<ion-tabs ng-controller = "tabs" class="tabs-icon-top tabs-color-active-positive">

  <!-- Articles Tab -->
  <ion-tab title="Articles" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/tab/article">
    <ion-nav-view name="tab-article">
    </ion-nav-view>
  </ion-tab>

  <!-- Closets Tab -->
  <ion-tab title="Closet" icon-off="ion-ios-briefcase-outline" icon-on="ion-ios-briefcase" href="#/tab/closet">
    <ion-nav-view name="tab-closet"></ion-nav-view>
  </ion-tab>

  <!-- Settings Tab -->
  <ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" on-select = "redirect()" ><!--href="#/tab/settings">-->
    <ion-nav-view name="tab-settings"></ion-nav-view>
  </ion-tab>

</ion-tabs>

这是我的控制器（选择设置选项卡时会调用重定向功能）：

.controller('tabs', function($scope, Settings, $rootScope, $location, $window) {

  $scope.redirect = function() {
    if($rootScope.loggedOn) {
      console.log("ASSDA");
        $window.location.href = "#/tab/logIn";
      //  $location.path("#/tab/logIn");

    }
    else {
      $window.location.href = "#/tab/logIn";
    //  $location.path("#/tab/logIn");


    }
  }
});

正如你所看到的，我已经尝试过$ window.location.href和$ locaion.path - 两者都不起作用。选择“设置”选项卡后，它将默认为文章选项卡。一旦您进入文章页面并单击返回设置，它将默认返回到文章页面，但这次您将获得一个空白页面。它正在命中我的console.log（“ASSDA”），所以if语句返回true。

以下是我的路线设置方式：

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

  $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.article', {
    url: '/article',
    views: {
      'tab-article': {
        templateUrl: 'templates/tab-article.html',
        controller: 'articlesController'
      }
    }
  })

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

  .state('tab.settings', {
url: '/settings',
views: {
  'tab-settings': {
    templateUrl: 'templates/tab-settings.html',
    controller: 'settingsController'
  }
}
  })
  .state('tab.login', {
    url: '/login',
    templateUrl: 'templates/tab-login.html',
    controller: 'settingsController'
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/article');

});

Answer 1

<强> app.js

var app = angular.module('ionicApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/tab/article");
    $stateProvider
        .state('tab', {
            url: '/tab',
            templateUrl: 'tab.html',
            abstract: true
        }).state('tab.article', {
            url: '/article',
            views: {
                'tab-article': {
                    templateUrl: 'templates/tab-article.html',
                    controller: 'articlesController'
                }
            }
        })
        .state('tab.closet', {
            url: '/closet',
            views: {
                'tab-closet': {
                    templateUrl: 'templates/tab-closet.html',
                    controller: 'closetController'
                }
            }
        })
        .state('tab.settings', {
            url: '/settings',
            views: {
                'tab-settings': {
                    templateUrl: 'templates/tab-settings.html',
                    controller: 'settingsController'
                }
            }
        })

})
.controller('articlesController', function($scope) {})
.controller('closetController', function($scope) {})
.controller('settingsController', function($scope) {})

在 index.html

中添加代码

<ion-nav-bar class="bar-energized nav-title-slide-ios">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

<script id="tab.html" type='text/ng-template'>
    <ion-tabs class="tabs-icon-top tabs-color-active-positive">

        <ion-tab title="Articles" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" ui-sref="tab.article">
            <ion-nav-view name="tab-article">
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Closet" icon-off="ion-ios-briefcase-outline" icon-on="ion-ios-briefcase" ui-sref="tab.closet">
            <ion-nav-view name="tab-closet"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="tab.settings">
            <ion-nav-view name="tab-settings"></ion-nav-view>
        </ion-tab>

    </ion-tabs>

</script>

<script id='templates/tab-article.html' type='text/ng-template'>
    <ion-view title="Articles Page">
        <ion-content>
            Articles page
        </ion-content>
    </ion-view>
</script>

<script id='templates/tab-closet.html' type='text/ng-template'>
    <ion-view title="Closet Page">
        <ion-content>
            Closet page
        </ion-content>
    </ion-view>
</script>

<script id='templates/tab-settings.html' type='text/ng-template'>
    <ion-view title="Settings Page">
        <ion-content>
            Settings page
        </ion-content>
    </ion-view>
</script>

Answer 2

我想出来了，我实际上需要在tabs.html中添加另一个隐藏的登录标签。我想它正在寻找一个不存在的登录选项卡 - 将其添加到tabs.html修复它。所以它会是：

  <ion-tab title="LogIn" hidden="true">
      <ion-nav-view name="tab-logIn"></ion-nav-view>
  </ion-tab>

$ location.path没有路由到正确的页面

2 个答案: