CODEWITHSUNDEEP
angularjshtmlionic-framework
Millenial2020
Millenial2020

Reputation: 2913

angular ui-router how to navigate inside a nested view

Hello I have a little bit of a problem that I have being trying to solve for 3 days now. It seems to be simple but I don't know what is giving me so much problems.

I have a main parent view that hold a viewA and viewB child views. I want to navigate from viewA to viewB and from viewB to viewA, but the problem is that i can navigate from viewA to viewB but not from viewB to viewA.

I have a working codepen at the bottom.

thi is my html.

    <html ng-app="ionicApp">
  <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="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
  </head>

  <body>

    <ion-nav-view></ion-nav-view>

    <script id="templates/main.html" type="text/ng-template">

    <div class="bar bar-header bar-dark">
      <h1 class="title">bar-dark</h1>
    </div>

      <ion-nav-view name="viewA"></ion-nav-view>
      <ion-nav-view name="viewB"></ion-nav-view>

    </script>

    <script id="templates/viewA.html" type="text/ng-template">
      <div style='padding-top: 45px'>
        <div class="row">
          <div class="col">
            <a ui-sref="main.viewB" class="button button-stable">Go to view B</a>
          </div>
        </div>
      </div>
    </script>

    <script id="templates/viewB.html" type="text/ng-template">
      <div style='padding-top: 45px'>
        <div class="row">
          <div class="col">
            <a ui-sref="main.viewA" class="button button-stable">Go to view A</a>
          </div>
        </div>
      </div>
    </script>

  </body>
</html>

this is my javascript

    angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/main/viewA");

  $stateProvider
    .state('main', {
    url:'/main',
    abstract: true,
    templateUrl: "templates/main.html"
    })

    .state('main.viewA', {
    url: '/viewA',
    views: {
      'viewA': {
        templateUrl: 'templates/viewA.html'
      }
    }
  })

  .state('main.viewB', {
    url: '/viewB',
    views: {
      'viewB': {
        templateUrl: 'templates/viewB.html'
      }
    }
  })

})

codepen example

Upvotes: 0

Views: 218

Answers (1)

Mikko Viitala
Mikko Viitala

Reputation: 8404

Few pointers...

You don't need to have multiple- and/or named ion-nav-views in your main template, one is sufficient. Second, bar bar-header bar-dark class and padding-top: 45px inline style pushed some of the elements out of the view (at least on my machine).

So working template could be following.

<body>
  <ion-nav-view></ion-nav-view>

  <script id="templates/main.html" type="text/ng-template">
    <div>
      <h1 class="title">parent view</h1>
      <ion-nav-view></ion-nav-view>
    </div>     
  </script>

  <script id="templates/viewA.html" type="text/ng-template">
    <div class="row"> 
      <div class="col">
        <a ui-sref="main.viewB" class="button button-stable">Go to view B</a>
      </div>
    </div>
  </script>

  <script id="templates/viewB.html" type="text/ng-template">
    <div class="row">
      <div class="col">
        <a ui-sref="main.viewA" class="button button-stable">Go to view A</a>
      </div>
    </div>
  </script>

</body>

And you are making your routing too complex, following will do.

$stateProvider
  .state('main', {
    url:'/main',
    abstract: true,
    templateUrl: "templates/main.html"
  })  
  .state('main.viewA', {
    url: '/viewA',
    templateUrl: 'templates/viewA.html'
  })
  .state('main.viewB', {
    url: '/viewB',
    templateUrl: 'templates/viewB.html'
  });

Upvotes: 1

Related Questions