Question

我对这段代码有一个问题，当我点击按钮时，什么也没发生...... 通常，应显示“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>

Answer 1

问题是您的观点名称。

.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>

＆＃34;家用＆＃34;和＆＃34;登录＆＃34;。您正试图加载您的观点＆＃34;新闻＆＃34;哪个不存在。如果你改变了那个＆＃34;新闻＆＃34; =＆GT; ＆＃34;家＆＃34;它会起作用。

（离子）问题：$ state.go不显示模板

1 个答案: