Not able to replace the view with <ion-nav-view>

Question

Not able to replace the view in ionic with . I have menu in form of buttons when I click them the view is not getting replaces.Below is the code I have tried

**index.html**
<div class="button-bar">
    <a class="button button-small button-stable button-outline" ui-sref="page1">Page1</a>
    <a class="button button-small button-stable button-outline" ui-sref="page2">Page2</a>
    <a class="button button-small button-stable button-outline" ui-sref="page3">Page3</a>
</div>
<ion-nav-view name="page1"></ion-nav-view>
<ion-nav-view name="page2"></ion-nav-view>
<ion-nav-view name="page3"></ion-nav-view>

The js files used to replace the view.In page.controller.js nothing is theres. Just declared with app.controller and nothing is there.

**pages.js**
app.config(function($stateProvider, $urlRouterProvider) {    
$stateProvider.state('page1', {
    cache: false,
   parent:'app',           
    views: {
        'page1': {
            templateUrl: 'templates/page1.html',
            controller: 'pages.controller'
        }
    }
}).state('page2', {
    cache: false,
   parent:'app',         
    views: {
        'page2': {
            templateUrl: 'templates/page2.html',
            controller: 'pages.controller'
        }
    }
}).state('page3', {
    cache: false,
   parent:'app',           
    views: {
        'page3': {
            templateUrl: 'templates/page1.html',
            controller: 'pages.controller'
        }
    }
})
});

The below are the html pages for the views.

page1.html
<ion-view view-title="page1">
<ion-content> 
<div> <h2> Welcome to Page 1</h2> </div>
</ion-view>
</ion-content> 



page2.html
<ion-view view-title="page2">
<ion-content> 
<div> <h2> Welcome to Page 2</h2> </div>
</ion-view>
</ion-content> 



 page3.html 
<ion-view view-title="page3">
<ion-content> 
<div> <h2> Welcome to Page 3</h2> </div>
</ion-view>
</ion-content> 



app.js
var app = angular
    .module(
            'sampleapp',
            [ 'ionic' ]).config(
            function($stateProvider, $urlRouterProvider) {
                $stateProvider
                        .state('app', {
                            cache : false,
                            url : "/app",
                          abstract:true,
                            templateUrl : "templates/index.html",
                            controller : 'appcontroller'
                        })

Kindly, help me understand why the view is not getting replaced.

Answer 1

this is likely because you have 3 different ion-nav-view tags, and each one of them having a separate name, along with each state only replacing its specific tag name. Which means even if your views are injected, they will overlap (and probably why you're not seeing your views change, as theyre overlapping).

You should change:

index.html

<div class="button-bar">
    <a class="button button-small button-stable button-outline" ui-sref="page1">Page1</a>
    <a class="button button-small button-stable button-outline" ui-sref="page2">Page2</a>
    <a class="button button-small button-stable button-outline" ui-sref="page3">Page3</a>
</div>
<ion-nav-view name="page-content"></ion-nav-view>

pages.js

app.config(function($stateProvider, $urlRouterProvider) {    
$stateProvider.state('page1', {
    cache: false,
   parent:'app',           
    views: {
        'page-content': {
            templateUrl: 'templates/page1.html',
            controller: 'pages.controller'
        }
    }
}).state('page2', {
    cache: false,
   parent:'app',         
    views: {
        'page-content': {
            templateUrl: 'templates/page2.html',
            controller: 'pages.controller'
        }
    }
}).state('page3', {
    cache: false,
   parent:'app',           
    views: {
        'page-content': {
            templateUrl: 'templates/page1.html',
            controller: 'pages.controller'
        }
    }
})
});