cannot switch between child state in angular ui.router

Question

Following is my code and its codepen . I am unable to switch from nav4's child1 to child2, or child3, the url changes but the view doesn't, but after clicking on any child and then refreshing the browser loads the content of state.

HTML

<nav class="advance-navbar">
                <div class="container-fluid">
                    <ul class="nav navbar-nav adv-nav">
                        <li class="dropdown active">
                            <a ui-sref="nav1" class="dropdown-toggle"> <span>nav1</span></a>
                        </li>
                        <li class="dropdown">
                            <a ui-sref="nav2" class="dropdown-toggle"><span>nav2</span></a>
                        </li>
                        <li class="dropdown">
                            <a ui-sref="nav3" class="dropdown-toggle"><span>nav3</span></a>
                        </li>

                        <li class="dropdown">
                            <a ui-sref="nav4" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">nav4 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a ui-sref="nav4.child41">child1</a></li>
                                <li><a ui-sref="nav4.child42">child2</a></li>
                                <li><a ui-sref="nav4.child43">child3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>

JS

var example = angular.module("example", ['ui.router']);
example.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
            .state('nav1', {
                url: '/nav1',
                template: '<h1>{{stateurl}}</h1',
                controller: 'dummyCtrl',
                data : {elastic_index : 'nav1'}
            })
            .state('nav2', {
                url: '/nav2',
                template: '<h1>{{stateurl}}</h1',
                controller: 'dummyCtrl',
                data : {elastic_index : 'nav2'}
            })
            .state('nav3', {
                url: '/nav3',
               template: '<h1>{{stateurl}}</h1',
                controller: 'dummyCtrl',
                data : {elastic_index : 'nav3'}
            })
            .state('nav4', {
                url: '/nav4',
                template: '<h1>{{stateurl}}</h1',
                controller: 'dummyCtrl',
                data : {elastic_index : 'nav4'}
            })
            .state('nav4.child41', {
                url: '/child41',
                template: '<h1>{{stateurl}}</h1',
                controller: 'dummyCtrl',
                data : {elastic_index : 'child41'}
            })
            .state('nav4.child42', {
                url: '/child42',
                template: '<h1>{{stateurl}}</h1',
                controller: 'dummyCtrl',
                data : {elastic_index : 'child42'}
            })
            .state('nav4.child43', {
                url: '/child43',
               template: '<h1>{{stateurl}}</h1',
                controller: 'dummyCtrl',
                data : {elastic_index : 'child43'}
            });

        $urlRouterProvider.otherwise('/nav1');
  });
  example.controller('dummyCtrl', function ($scope, $state){
      console.info($state)
      $scope.stateurl= $state.current.data.elastic_index;
  })

CodePen Example

Edit In actual app I have same templateURL file for both parent and child state

WalksAway · Accepted Answer · 2016-09-27 19:20:19Z

2

you need to add <div ui-view></div> to the parent template, so the router will place the child view there

look here: http://codepen.io/anon/pen/ALrvPw

answered Sep 27, 2016 at 19:20

WalksAway

2,8292 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rizwan Haider Over a year ago

Thanks @WAlks for your reply, it works fine. but in my actual app my all states (both parent and child) have same html, how do I implement it in that scenario.

Abdul · Accepted Answer · 2016-09-28 08:09:40Z

Here you do not need to show the nav4 itself, so make it abstract. An abstract state is implicitly activated when one of its child states are activated. This is useful when we need to prepend a url to all the child state urls we need to insert a template with its own ui-view that the child states will fill. So it will be like this

var example = angular.module("example", ['ui.router']);
example.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('nav1', {
        url: '/nav1',
        templateUrl: 'templates/dummy.html',
        controller: 'dummyCtrl',
        data: {
            elastic_index: 'nav1'
        }
    })
    .state('nav2', {
        url: '/nav2',
        templateUrl: 'templates/dummy.html',
        controller: 'dummyCtrl',
        data: {
            elastic_index: 'nav2'
        }
    })
    .state('nav3', {
        url: '/nav3',
        templateUrl: 'templates/dummy.html',
        controller: 'dummyCtrl',
        data: {
            elastic_index: 'nav3'
        }
    })
    .state('nav4', {
        abstract: true,
        url: '/nav4',
        template: '<ui-view/>',
        controller: 'dummyCtrl',
        data: {
            elastic_index: 'nav4'
        }
    })
    .state('nav4.child41', {
        url: '/child41',
        templateUrl: 'templates/dummy.html',
        controller: 'dummyCtrl',
        data: {
            elastic_index: 'child41'
        }
    })
    .state('nav4.child42', {
        url: '/child42',
        templateUrl: 'templates/dummy.html',
        controller: 'dummyCtrl',
        data: {
            elastic_index: 'child42'
        }
    })
    .state('nav4.child43', {
        url: '/child43',
        templateUrl: 'templates/dummy.html',
        controller: 'dummyCtrl',
        data: {
            elastic_index: 'child43'
        }
    });

$urlRouterProvider.otherwise('/nav1');
});

example.controller('dummyCtrl', function ($scope, $state) {
console.info($state)
$scope.stateurl = $state.current.data.elastic_index;
})

Collectives™ on Stack Overflow

cannot switch between child state in angular ui.router

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related