Ion-nav-view is not updating


#1

ionic-nav-view is not getting updated through router is working perfectly, I am new to ionic and angular, seeking help. I am pasting the code here. Thanks.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title>Document</title>
	<link href="lib/ionic/css/ionic.css" rel="stylesheet">

	<script src="js/jquery-1.11.1.js"></script>
	<script src="lib/ionic/js/ionic.bundle.js"></script>
</head>
<body ng-app="makeMeDeny">
	<ion-header-bar class="bar-positive">
		<div class="buttons">
			<button class="icon ion-android-menu button button-clear"></button>
			<button class="icon ion-home button button-clear"></button>
		</div>
		<h1 class="title">CART DEMO</h1>
		<div class="buttons">
			<button class="icon ion-android-search button button-clear"></button>
			<button class="icon ion-cart button button-clear"></button>
		</div>
	</ion-header-bar>
	<!-- <ion-nav-bar class="bar bar-positive">
		<div class="buttons">
			<button class="icon ion-android-menu button button-clear"></button>
			<button class="icon ion-home button button-clear"></button>
		</div>
	</ion-nav-bar> -->

	<ion-content>
		<ion-nav-view class="slide-left-right">
			<a ui-sref="home">Home</a>
			<a ui-sref="about">About</a>
		</ion-nav-view>
	</ion-content>
	<ion-footer-bar class="bar-positive"></ion-footer-bar>




	<script>
		var makeMeDeny = angular.module('makeMeDeny',['ionic']);
			makeMeDeny.controller('homeCtrl', ['$scope', function($scope){
				$scope.me="Kamalendu"
			}])

		makeMeDeny.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
			
			$urlRouterProvider.otherwise('/home')

			$stateProvider
				.state('home', {
					url:'/home',
					templateUrl:"templates/home.html",

					controller:function($scope){
						$scope.me="hmm"
					}
				})
				.state('about',{
					url:'/about',
					template:"<h2>About</h2>"
				})
		}])
	</script>
</body>
</html>

and code for home.html is here…

<ion-view view-title="My Page">
<ion-content>
  Hello!
</ion-content>
</ion-view>

#2

In your route, set the controller to your actual controller name like so:

.state('home', {
  url:'/home',
  templateUrl:"templates/home.html",
  controller: 'homeCtrl'
})

Now, your /home route and view is using the home controller and you can change the value with $scope.me=“xx”


#3

Yes. I did the same in my development phase but nothing worked so far, routing is working, I can see as the url changing in the the url bar but the content is not showing into the content section.


#4

I think there is something wrong with your index.html…
In my file there is:

<body ng-app="myApp">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>

Remove the ion-content around the ion-nav-view … like here: http://ionicframework.com/docs/api/directive/ionNavView/


#5

You need to restructure your app. It should look similar to this in your index.html (plus any customizations you make to the ion-nav-bar):

<ion-nav-bar class="bar-positive">
    <ion-nav-buttons side="primary">
        <button class="icon ion-android-menu button button-clear"></button>
        <button class="icon ion-home button button-clear"></button>
    </ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<ion-footer-bar class="bar-positive"></ion-footer-bar>

Nothing should be inside of the ion-nav-view because the template containing the <ion-view> will go there. You need to use an ion-nav-bar to take advantage of changing the view-title. Here is a Codepen example of some navigation: http://codepen.io/brandyshea/pen/YPdWXj?editors=101

Here is a blog post that may help to understand the structure: http://mcgivery.com/structure-of-an-ionic-app/

And a list of Ionic resources: http://mcgivery.com/100-ionic-framework-resources/