（ionic）問題：$ state.goにテンプレートが表示されない

ボタンをクリックしても何も起こりません... 通常、「news.html」内のテンプレート"が表示されます。私はインターネットでチェックしましたが、何も助けてくれませんでした...どうしたのですか？

は

var nameApp = angular.module('starter', ['ionic']); 

nameApp.config(['$stateProvider', '$urlRouterProvider', '$ionicConfigProvider', function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
$stateProvider 
    .state('tab', { 
    url: '/tab', 
    abstract: true, 
    templateUrl: 'tabs.html' 
    }) 

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

    .state('tab.news', { 
    url: '/news', 
    views: { 
     'News': { 
     templateUrl: 'news.html', 
     controller: 'HomeCtrl' 
     } 
    } 
    }) 

$urlRouterProvider.otherwise('/tab/home'); 

}]); 

nameApp.controller('HomeCtrl', ['$scope', '$state', function ($scope, $state) { 

    $scope.goNews = function() { 
    $state.go("tab.news"); 
    }; 

}]);

"index.htmlの"

<html ng-app="starter"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> 
    <title>Ionic Framework Example</title> 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/> 
    <link href="style.css" rel="stylesheet"/> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    <script src="app.js"></script> 
</head> 

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

    <ion-nav-view> 

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

</html>

"tabs.html"

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

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

    <!-- Login Tab --> 
    <ion-tab title="Login" icon-off="ion-ios-locked-outline" icon-on="ion-ios-locked" href="#/tab/login"> 
    <ion-nav-view name="login"></ion-nav-view> 
    </ion-tab> 

</ion-tabs>

"home.html"

<ion-view title="Home"> 
    <ion-content class="padding"> 
    <button type="submit" class="button button-block button-positive" ng-click="goNews()"> News </button> 
    </ion-content> 
</ion-view>

"app.js"

「news.html」

<ion-view title="News"> 
    <ion-content class="padding"> 

    <div class="padding"> 
     <h1> News </h1> 
    </div> 

    </ion-content> 
</ion-view>

出典

2017-04-18 Totof TonMomon

問題はビューの名前です。

<!-- Home Tab --> 
    <ion-nav-view name="home"></ion-nav-view> 

    <!-- Login Tab --> 
    <ion-nav-view name="login"></ion-nav-view>

"ホーム" と "ログイン"：

.state('tab.news', { 
    url: '/news', 
    views: { 
     'News': { //<= this is the name of the ui-view in which this state loads. 
     templateUrl: 'news.html', 
     controller: 'HomeCtrl' 
     } 
    } 
    })

あなたのタブには、2つのビューがあります。存在しない "ニュース"にあなたのビューを読み込もうとしています。それを "News" => "home"に変更すると、それは機能します。

出典

2017-04-18 17:31:18 yBrodsky

（ionic）問題：$ state.goにテンプレートが表示されない

答えて

関連する問題