Nested states: parent state without template/templateUrl

[santyclaz]

I hope this is the right place for me to ask questions concerning issues I am having, I apologize if it isn't.

I feel like what I am trying to do should be fairly straight forward, but it doesn't seem to be working. Here is what I have:

$stateProvider.state('order', {
    abstract: true,
    controller : 'orderController'
});

$stateProvider.state('order.view', {
    url: '^/orders/{id:[0-9]+}',
    resolve: {
        order : ['$stateParams', 'ajax.Orders', function($stateParams, AjaxOrder) {
            return AjaxOrder.get($stateParams.id);
        }]
    },
    templateUrl: '/app/order/view/view.html',
    controller: 'viewOrderController'
});

$stateProvider.state('order.edit', {
    ...
});

My intent is to have all children of the order state inherit the behaviour and properties that exists on the orderController.

I prefer not to have a templateUrl on the parent state, but rather have all children states provide the template/templateUrl that will be displayed in the view.

The only way I got my code to work was if I added a template/templateUrl to the order parent state where the HTML is simply <div ui-view></div>. I could also get the child template to display if I targeted the unnamed view and state via the '@' syntax, but the child state never inherits the behaviour and properties from the parent controller.

Am I right in making the assumption that parent states always need a template or templateUrl for a child state's template to render on the page, unless the child state has views that target specific views in specific states (via '@' syntax)?

Thanks in advance for all your help!

[timkindberg]

Yes you need to add a template to 'order'. This allows the views to nest which creates the normal scope inheritance that you see in plain old angular. There is no magical inheritance from parent to children states, its all done through scopes inheriting down the DOM. So no template on 'order', means no DOM to inherit from.

The documentation was blatantly incorrect for the last several months. It stated that things like controllers and templates will inherit to children states, but that is NOT TRUE. Its since been fixed.

[santyclaz]

Ah this makes sense, thanks for the clarification!

I wonder if there would ever be a strong use case for such "magical inheritance" from parent to children states. Something I'll have to think on.

Thanks again!

[timkindberg]

It's something we'd just only thought about. I personally see it creating as many problems as it solves. But maybe if we can find an intuitive way to meld normal scope inheritance with a new state based inheritance. Also what all would we want to inherit? Just scope? Or other things as well, like template, controller, etc.

[santyclaz]

Yeah state-based inheritance can get tricky. I feel the complexity would mainly revolve around how the inheritance would play along with all the possible options and properties like you mention (template, controller, etc.).

The first question that pops into my mind is whether it would make sense for views to be inherited. On one hand it sounds like something that would be great to have; I could have a parent state that defines different views that gets reused as needed among the children states (in essence views = partials). On the other hand, it also seems like it can quickly become a can of worms when you start considering targeted views (@ syntax).

This definitely seems like something that could be worth exploring.