Controller on nested state not getting executed

Question

I have nested states, with the parent and child state having a separate controller. But only the parent state is getting executed.

I have the url structure: #/restaurant/2/our-food

So, I want it to load the restaurant with the ID 2 and then the child controller load the 'our-food' content and take care of some other functions.

My code is:

var app = angular.module("app", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise("/");

$stateProvider
            .state('home', {
                url: '/',
                controller: function($scope, $stateParams) {
                        $scope.setRestaurant(0);
                }
            })
            .state('restaurant', {
                url: '/restaurant/:restaurantId',
                controller: function($scope, $stateParams, $state) {
                    console.log('first');
                    if($stateParams.restaurantId > 0) {
                        $scope.setRestaurant($stateParams.restaurantId);
                    }
                    else {
                        $state.go('home');
                    }
                }
            })
    .state('restaurant.our-food', {
        url: '/our-food',
        templateUrl: 'templates/our-food.html',
                    controller: function() {
                        console.log('second');
                    }
    });

});

Daniel Tabuenca · Accepted Answer · 2013-11-28 00:21:46Z

11

The controller for your 'restaurant.our-food' state is not being executed because its parent state has no template. This means there is no ui-view directive for it to attach its own template and controller. Even if your parent directive doesn't do anything other than setup some state, it needs to provide at the very least a minimal template.

Try adding the following to your 'restaurant' state and see if that makes it work for you:

template: "<div ui-view />"

This is documented in the ui-router docs:

Remember: Abstract states still need their own for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: <ui-view />'.

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

answered Nov 28, 2013 at 0:21

Daniel Tabuenca

13.7k3 gold badges40 silver badges43 bronze badges

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

1 Comment

Ben Southall Over a year ago

That did the job! Thanks a lot mate. I had read the documentation, but must of missed that part.

Collectives™ on Stack Overflow

Controller on nested state not getting executed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related