2016-11-16 6 views
0

Ionicアプリのルーティングができません。 home.htmlのリンク( 'Scientific Facts')をクリックすると、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'); 
    }; 
}); 

あなたが$state.go('urPage')を使用しない理由$stateProviderを、使用している、以来

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

答えて

1

さらなる研究から、私は、ページをナビゲートしている、との見方名を知るようになりましたそれがナビゲートされたビュー名と同じでなければならない。

以下はです。間違ってビュー名を定義しました。以下は

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

それからナビゲートされているビュー名と同じ正しく定義されたビュー名すなわちです。

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

これに加えて、私はなぜあなたがビューを使用しているのかわかりません。ある状態について複数のビューがあった場合は、ビューを使用します。それ以外の場合は、状態定義を .state( 'tab.facts'、{url: '/ facts'、templateUrl: 'templates/facts.html'}) –

+0

に単純化するだけで、ui-sref = hrefの代わりに "tab.facts" –

0

をapp.js。あなたのビューで
:あなたのコントローラで

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

はまだ動作しません、あなたの提案をしようとしました。 – user44776

0

として、Crhistian Ramirez氏はhrefの代わりにui-srefを使用するように言いました。

旧ソリューション:

<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> 
関連する問題