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

Question

I have an issue with this chunk of code, when I click on the button, nothing happened... Normally, the template inside "news.html" should display. 我对这段代码有问题，当我单击按钮时，什么也没有发生...通常，应该显示“ news.html”中的模板。 I've checked on internet but nothing for help me... So what is going wrong, please ? 我已经检查了互联网，但没有任何帮助。...请问出了什么问题？

"app.js" “ 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" “ 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" “ 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" “ 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" “ news.html”

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

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

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

Answer 1

The problem is the name of your 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'
      }
    }
  })

Your tabs have two views: 您的标签有两个视图：

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

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

"home" and "login". “首页”和“登录”。 You are trying to load your view in "News" which doesn't exist. 您正在尝试将视图加载到不存在的“新闻”中。 If you change that "News" => "home" it will work. 如果您更改“ News” =>“ home”，它将起作用。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-18 17:31:18

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-18 17:31:18

解决方案1
1 已采纳 2017-04-18 17:31:18