无法在 Ionic 应用程序中进行路由工作

Question

我无法让路由为 Ionic 应用程序工作。当我单击 home.html 中的 link ('Scientific Facts') 时，它不会导航到 facts.html 我已经阅读了有关堆栈溢出的所有相关文档和其他类似答案，但其中 none 有帮助。

下面是我的文件 index.html、app.js、states.js 文件。有人可以告诉我哪里可能出错吗？

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/ionicons.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/states.js"></script>


    <script src="js/services.js"></script>
  </head>
  <body ng-app="curie">

    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>


    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Home">
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
          </p>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/facts.html" type="text/ng-template">
      <ion-view view-title="Facts">
        <ion-content class="padding">
          <p>Banging your head against a wall uses 150 calories an hour.</p>
          </p>
        </ion-content>
      </ion-view>
    </script>
  </body>
</html>

states.js

angular.module('curie')
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  .state('tab.home', {
    url: '/home',
    views: {
      'home': {
        templateUrl: 'templates/home.html',
        controller: 'HomeTabCtrl'
      }
    }
  })
  .state('tab.facts', {
    url: '/facts',
    views: {
      'facts': {
        templateUrl: 'templates/facts.html'
      }
    }
  })
  $urlRouterProvider.otherwise('/tab/home');


})

.controller('HomeTabCtrl', function($scope, $location) {
  console.log('HomeTabCtrl');
     $scope.goToUrl = function(path) {
        $location.path('#/tab/overviewPhoto');
    };
});

app.js

angular.module('curie', [
  'ionic', 
  'ngCordova', 
  'ui.router',
  ])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

Answer 1

既然你用的是$stateProvider，为什么不用$state.go('urPage')。
在您看来：

<a class="button icon icon-right ion-chevron-right" ng-click="goFacts()">Scientific Facts</a>

在您的控制器中：

.controller('HomeTabCtrl', function($scope, $location,$state) {
  console.log('HomeTabCtrl');
     $scope.goToUrl = function(path) {
        $location.path('#/tab/overviewPhoto');
    };//u don't have this function in the view.

    $scope.goFacts = function(){
       $state.go('tab.facts');
  }
});

Answer 2

通过进一步研究，我了解到，页面导航到的视图名称应与其导航来源的视图名称相同。

下面是不正确定义的视图名称。

  .state('tab.facts', {
    url: '/facts',
    views: {
      'facts': {
        templateUrl: 'templates/facts.html'
      }
    }
  })

下面是正确定义的视图名称，即与导航的视图名称相同。

  .state('tab.facts', {
    url: '/facts',
    views: {
      'home': {
        templateUrl: 'templates/facts.html'
      }
    }
  })

Answer 3

正如 Crhistian Ramirez 所说，尝试使用 ui-sref 而不是 href。

旧解：

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Home">
    <ion-content class="padding">
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

新解：

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Home">
    <ion-content class="padding">
      <p>
        <a class="button icon icon-right ion-chevron-right" ui-sref="tab.facts">Scientific Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

无法在 Ionic 应用程序中进行路由工作

Unable to get routing work in Ionic app

angularjs

angular-ui-router

ionic-framework

ionic-view