（離子）問題：$ state.go不顯示模板

我有這個代碼塊的問題，當我點擊按鈕時，什麼都沒有發生...... 通常，模板裏面的「news.html 「應該顯示。我已經在互聯網上查過，但沒有任何幫助我......那麼請問哪裏出了問題？

「app.js」

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>

「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

問題是您的視圖的名稱。

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

你的標籤有兩種觀點：

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

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

「家」和「登錄」。您正嘗試在「新聞」中加載您的視圖，該視圖不存在。如果您更改「新聞」=>「家庭」，它將起作用。

來源

2017-04-18 17:31:18 yBrodsky

（離子）問題：$ state.go不顯示模板

回答

相關問題