CODEWITHSUNDEEP
javascriptangularjsionic-frameworkangular-ui-router
Totof TonMomon
Totof TonMomon

Reputation: 83

(ionic) Issue : $state.go doesn't display the template

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. I've checked on internet but nothing for help me... So what is going wrong, please ?

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

Upvotes: 0

Views: 116

Answers (1)

yBrodsky
yBrodsky

Reputation: 5041

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.

Upvotes: 1

Related Questions