Multi-nested ui-views

Here's my config:

$stateProvider.
  state('frontPage', {
    url: '/',
    templateUrl: 'index.html',
    controller: 'MainCtrl',
    onEnter: function() {
      console.log('frontPage');
    }
  }).
  state('frontPage.interestGame', {
    url: 'interest',
    templateUrl: 'interest-game/index.html',
    controller: 'GameCtrl',
    onEnter: function() {
      console.log('frontPage.interestGame');
    }
  }).
  state('frontPage.interestGame.game', {
    url: ':platform',
    templateUrl: 'interest-game/game.html',
    controller: 'GameCtrl',
    onEnter: function() {
      console.log('frontPage.interestGame.game');
    }
  });

I am able to go to / and /interest and the templates, controllers, and onEnter functions all run as expected. However when I go to /interest/anything it fails to load my templates. It's simply an empty page with no console.log errors... I see that all my scripts were loaded as expected so I know that it's not a server issue... Perhaps I'm misunderstanding how the nested states work...?

Answers


I believe each url state entry has to start with a leading /. Try changing :platform to /:platform.


You do indeed need that leading / before :platform, otherwise it would be interpreted as /interest:anything (no slash in between).

Also, interest-game/index.html should contain a <div ui-view></div>.


Need Your Help

VBA: How long does On Error Resume Next work?

vba try-catch onerror

I'm reading up on how to use On Error Resume Next and I'm trying to figure out how long that line will apply to the program. On the Microsoft site, I found this sentence: "An On Error Resume Next