Ionic template content not showing
SHORT ANSWER
You have at least two issues:
-
in controller you call
$scope.enterState('home');
. On other hand each state calls the same controller. Therefore you enter to the same statehome
.Remove this line and add in
config
:$urlRouterProvider.otherwise('/home');
-
In HTML add
<ion-nav-view class="slide-left-right"></ion-nav-view>
That's all.
Here is working Demo
WORKING CODE
HTML
<html ng-app="testapp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Login</title>
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-header">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Home1</h1>
<button class="button button-icon">
<i class="icon ion-star"></i>
</button>
</ion-header-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-list>
<ion-item class="item item-icon-left" ng-repeat="item in menuItems" item="item" ng-click="enterState(item.id)">
<i class="{{item.icon}}"></i> {{item.name}}
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content padding="true">
<p>HOME</p>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view title="Page 2">
<ion-content padding="true">
<p>PAGE 2</p>
</ion-content>
</ion-view>
</script>
<script id="page3.html" type="text/ng-template">
<ion-view title="Page 3">
<ion-content padding="true">
<p>PAGE 3</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
JS
angular.module('testapp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
/* Set up the states for the application's different sections. */
$stateProvider
.state('home', {name: 'home', url: '/home', templateUrl: 'home.html', controller: 'MainCtrl'})
.state('page2', {name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'MainCtrl'})
.state('page3', {name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'MainCtrl'})
;
$urlRouterProvider.otherwise('/home');
})
.controller('MainCtrl', function($scope, $state, $ionicSideMenuDelegate) {
"use strict";
/* Items for left side menu. */
$scope.menuItems = [
{id: 'page2', name: 'Page 2', icon: 'icon ion-person-stalker'},
{id: 'page3', name: 'Page 3', icon: 'icon ion-person-stalker'}
];
$scope.toggleSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.enterState = function(stateID) {
console.log(stateID);
$state.transitionTo(stateID);
};
//$scope.enterState('home');
$scope.$state = $state;
})
BadmintonCat
iOS / Mac OSX / Unity3D developer and former Flash/AS3 developer in Tokyo, Japan. Also delving into C# .NET development.
Updated on April 24, 2020Comments
-
BadmintonCat about 4 years
I've made a basic menu navigation with Ionic using ion-side-menus and an Angular state mechanism as described at http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/ but no content is showing up in the center section of the page when home is loaded or any of the menu's items are clicked. Here's the simplified HTML ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> </head> <body ng-app="testapp" ng-controller="MainCtrl"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-header"> <button class="button button-icon" ng-click="toggleSideMenu()"> <i class="icon ion-navicon"></i> </button> <h1 class="title">Home</h1> <button class="button button-icon"> <i class="icon ion-star"></i> </button> </ion-header-bar> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-list> <ion-item class="item item-icon-left" ng-repeat="item in menuItems" item="item" ng-click="enterState(item.id)"> <i class="{{item.icon}}"></i> {{item.name}} </ion-item> </ion-list> </ion-side-menu> </ion-side-menus> <script id="home.html" type="text/ng-template"> <ion-view title="Home"> <ion-content padding="true"> <p>HOME</p> </ion-content> </ion-view> </script> <script id="page2.html" type="text/ng-template"> <ion-view title="Page 2"> <ion-content padding="true"> <p>PAGE 2</p> </ion-content> </ion-view> </script> <script id="page3.html" type="text/ng-template"> <ion-view title="Page 3"> <ion-content padding="true"> <p>PAGE 3</p> </ion-content> </ion-view> </script> </body> </html>
And here is the controller JS ...
angular.module('testapp', ['ionic']) .config(function($urlRouterProvider, $stateProvider) { "use strict"; /* Set up the states for the application's different sections. */ $stateProvider .state('home', {name: 'home', url: '/home', templateUrl: 'home.html', controller: 'MainCtrl'}) .state('page2', {name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'MainCtrl'}) .state('page3', {name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'MainCtrl'}) ; }) .controller('MainCtrl', function($scope, $state, $ionicSideMenuDelegate) { "use strict"; /* Items for left side menu. */ $scope.menuItems = [ {id: 'page2', name: 'Page 2', icon: 'icon ion-person-stalker'}, {id: 'page3', name: 'Page 3', icon: 'icon ion-person-stalker'} ]; $scope.toggleSideMenu = function() { $ionicSideMenuDelegate.toggleLeft(); }; $scope.enterState = function(stateID) { $state.transitionTo(stateID); }; $scope.enterState('home'); $scope.$state = $state; })
The correct URL shows up so I suppose the state mechanism is working properly but the Ionic content in the Angular templates isn't appearing. Can anyone more experienced with Ionic give me a hint what is wrong here?