CODEWITHSUNDEEP
angularjsangular-ui-router
D Durham
D Durham

Reputation: 1341

SREF for Angular nested ui-router state not working

I am hoping maybe a fresh pair of eyes can spot the (probably obvious) piece I am missing here. I have a fairly simple plunker that shows the issue.

I have a few states and one that has a nested child below an abstract state. The SREF does not seen to work for that child (Child2):

angular.module('MyApp', ['ui.router'])

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

  $urlRouterProvider.otherwise('/');

  $stateProvider

    .state('index', {
      url: '/',
      views: {
        'header@': {template: '<h2>Header</h2>'},
        'content@': {template: '<h1>Content<h1>'},
        'footer@': {template: '<h4>Footer<h4>'}
      },
    })

    .state('index.child1', {
      url: 'child1',
      views: {
        'content@': {template: '<h1>Child1 Content<h1>'}
      }
    })

    .state('index.secure', {
      abstract: true,
      data: {
        auth: true
      }
    })

    .state('index.secure,child2', {
      url: 'secure/child2',
      views: {
        'content@': {template: '<h1>Secure Child2 Content</h1>'}
      }
    });

});

Index.html (with script tags removed for brevity, but they are in the plunker>

<html ng-app="MyApp">
 <head>
   <link href="style.css" rel="stylesheet">
 </head>
 <body>

   <a ui-sref="index">Index</a>
   <a ui-sref="index.child1">Child1</a>
   <!-- the one below does not work -->
   <a ui-sref="index.secure.child2">SecureChild2</a>

   <div ui-view="header"></div>
   <div ui-view="content"></div>
   <div ui-view="footer"></div>

  </body>
</html>

Any ideas why the Child2 sref is not working? I suspect it's something obvious that I am glazing over due to the minutia of staring at this code for so long.

TIA!

Upvotes: 0

Views: 77

Answers (1)

Ngzungu
Ngzungu

Reputation: 263

You are using a comma instead of a dot in your state declaration for index.secure.child2

.state('index.secure,child2', {
  url: 'secure/child2',
  views: {
    'content@': {template: '<h1>Secure Child2 Content</h1>'}
  }
});

Should be: 

   .state('index.secure.child2', { // uses a dot. 
  url: 'secure/child2',
  views: {
    'content@': {template: '<h1>Secure Child2 Content</h1>'}
  }
});

Heres a fixed version of your plunker: http://plnkr.co/edit/amhvuUGXxURQ3aQxBWtF

Upvotes: 1

Related Questions