无法在Ionic应用程序中获得路由工作

我无法获得路由以适用于Ionic应用程序。当我点击home.html中的链接（'科学概况'）时，它并没有导航到facts.html 我已经浏览了堆栈溢出的所有相关文档和其他类似的答案，但都没有帮助。无法在Ionic应用程序中获得路由工作

以下是我的文件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'); 
    }; 
});

，因为你正在使用$stateProvider，你为什么不使用$state.go('urPage') 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(); 
    } 
    }); 
})

来源

2016-11-16 user44776

从研究的深入，我已经认识到的是，视图名称的页面被浏览到，应与其从中导航的视图名称相同。

以下是错误定义了视图名称。

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

下面是正确定义视图名称即相同，因为它正在从导航的视图名。

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

来源

2016-11-16 04:52:48 user44776

此外，我不确定你为什么使用视图。如果你有一个状态有多个视图，你可以使用视图。否则，您可以将您的状态定义简化为 .state（'tab.facts'，{url：'/ facts'，templateUrl：'templates/facts.html'}） –

也可以尝试使用ui-sref = “tab.facts”而不是href –

。
您认为：

<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'); 
    } 
});

来源

2016-11-16 02:20:28

想你的建议，仍然不能正常工作。 – user44776

正如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>

来源

2016-11-16 09:11:49

无法在Ionic应用程序中获得路由工作

回答

相关问题