AngularJS ui-router not behaving with nested url as I would expect

Question

I have the following working code using ui-router that does not have any nesting:

           state('speaker', {
                url: '/speaker/:id',
                templateUrl: 'app/speakers/speaker-detail.html',
                controller: 'SpeakerDetailController as vm',
                resolve: {
                    speakerResourceService: 'speakerResourceService',
                    speaker: function(speakerResourceService,$stateParams) {
                        return speakerResourceService.get({id: $stateParams.id}).$promise;
                    }
                }
            }).

I've tried to pull it apart as is below. It kind of works but the controller never gets called.

           state('speaker', {
                abstract: true,
                url: '/speaker',
                templateUrl: 'app/speakers/speaker-detail.html'
            }).
            state('speaker.id', {
                parent: 'speaker',
                url: '/:id',
                templateUrl: 'app/speakers/speaker-detail.html',
                controller: 'SpeakerDetailController as vm',
                resolve: {
                    speakerResourceService: 'speakerResourceService',
                    speaker: function(speakerResourceService,$stateParams) {
                        return speakerResourceService.get({id: $stateParams.id}).$promise;
                    }
                }
            }).

All hints are welcome.

Controller is not called in second code snippet. Template renders bit with no expressions set because controller not called — Peter Kellner, Dec 02 '14 at 23:49

score 1 · Accepted Answer · answered Dec 03 '14 at 05:48

I created working example here. What we need here is a target for a child - inside of the parent:

.state('speaker', {
  abstract: true,
  url: '/speaker',
  //templateUrl: 'app/speakers/speaker-detail.html'
  template: "<div ui-view></div>"
}) 
.state('speaker.id', {
  parent: 'speaker',
  url: '/:id',
  //templateUrl: 'app/speakers/speaker-detail.html',
  template: "<div>this is a child state inside of a prent ui-view"
   + "<pre>{{$stateParams | json }}</pre>"
   + " <pre>{{$state.current | json }}</pre></div>",
  controller: 'SpeakerDetailController as vm',
  resolve: {
    speakerResourceService: 'speakerResourceService',
    speaker: function(speakerResourceService, $stateParams) {
      return 1;
      //return speakerResourceService.get({ id: $stateParams.id }).$promise;
    }
  }
});

So, what happened? Instead of this:

// parent
.state('speaker', {
    templateUrl: 'app/speakers/speaker-detail.html'
    ...
// child
.state('speaker.id', {
    templateUrl: 'app/speakers/speaker-detail.html',
    ...

where we have the same templates for parent and child - we need to create an anchor/target ... inside of a parent.. where the nested/child view will be placed:

// parent
.state('speaker', {
    // this does not have a target
    // templateUrl: 'app/speakers/speaker-detail.html'
    // this will instruct UI-Router where to inject child
    template: "<div ui-view></div>"
    ...

Check it here

Thanks Radim. Your extra effort here to figure out what was wrong and explain it so clearly is hugely helpful. If I could +10 I would. — Peter Kellner, Dec 03 '14 at 19:40
Radim, on a related note, I've been struggling with solving AngularJS problems like the above. Is there any guidance on how to solve problems like this? It seems that someplace, I should be able to discover that the ui-view is not being found. I've found angular debugging hard. Mostly solve by inspection and posting. Any hints are hugely appreciated. — Peter Kellner, Dec 03 '14 at 19:47
The way I learned UI-Router was by observing the sample app and reading the wiki. And I played with it - a lot. [**Here**](http://stackoverflow.com/a/20581135/1679310) I named all the resources - mostly the **state.js**. This is the most amazing piece of code and documentation in one place - I've ever met. And of course, do not hesitate to search or ask here (some people do down vote) some other will gladly assist... I am sure ;) Good luck with UI-Router — Radim Köhler, Dec 03 '14 at 19:52

score 0 · Answer 2 · answered Dec 02 '14 at 20:57

0

I believe you need to change the controller property to controllerAs: 'vm'

See here: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Additionally, you need to make sure you have ngRoute inlcuded in your module and the route scripts installed in your app. I'm assuming you've done this since it 'kind of works'.

Also, I would double-check the version you are using to make sure it's kosher with the info I'm providing (which is assuming you are using version 1.3.6).

Hope this helps! Good luck!

answered Dec 02 '14 at 20:57

caseybaggz

107
1
8

I'm confident my controller as syntax is good. It works in first code snippet no problem with that syntax. Same regarding ngRoute – Peter Kellner Dec 03 '14 at 00:10
because, you are using the ui-router and @caseybaggz routeProvider (url-router) which is built-in with angular. and he is talking about syntax which is routerProvider specific. – cbass Dec 03 '14 at 07:45
thanks cbass but I think the down votes are on my question and not caseybaggz's comment. – Peter Kellner Dec 03 '14 at 16:32

AngularJS ui-router not behaving with nested url as I would expect

2 Answers2