1

I'm developing an application where I have the use for a child state. The purpose of making a child state is

  1. To inherit the resolve
  2. To inherit the url base

When I navigate to the child state, the parent state's view and controller is initialized. The child controller isn't initialized at all, and the view isn't showing at all. One thing that I think is weird is that the child view is actually loaded over XHR, but then it never seems to appear.

How can I make the child state's view appear, and the child state's controller initialize with resolves from the parent state?

.state('restaurant', {
    url: "/{city:[a-zA-ZåäöÅÖÄ]{2,}}/{restaurantUrl:[a-zA_ZåäöÅÄÖ\-]{2,}}",
    views: {
        "main": {
            templateUrl: "/views/restaurant.html",
            controller: "RestaurantCtrl",
            resolve: {
                restaurant: function($q, $stateParams, RestaurantsSrvc) {
                    /*Some stuff going on that returns a promise*/
                }
            }
        }
    }
})
.state('restaurant.checkout', {
    url: "/checkout",
    views: {
        "main": {
            templateUrl: "/views/checkout.html",
            controller: "CheckoutCtrl"
        }
    }
})
Anton Gildebrand
  • 3,641
  • 12
  • 50
  • 86

1 Answers1

0

Add the <div ui-view="main"></div> to restaurant.html. Populating ui-view elements outside of the parent template is apparently not possible.

Also make sure that there is one ui-view per template with child states. When you have only one place to insert child templates, don't use named views, they are for cases where multiple child views need to be shown at the same time. The sketch in the documentation illustrates this use case nicely.

Also note that by default the parent view is shown when a child state is active, because the ui-view for the child is within the parent template. If you need to hide the parent stuff (or just parts of it) use ng-hide with the $state service as indicated by this answer.

Community
  • 1
  • 1
theDmi
  • 17,546
  • 6
  • 71
  • 138
  • That doesn't seem to work :/ There must be a way of saying what view `ui-view="main"` should show even if it's a child state? – Anton Gildebrand Sep 16 '15 at 08:50
  • No this is not how it works. The idea is that you create a dedicated `ui-view` in every template that has child states. And in case you need multiple independent children, you use named views (otherwise you don't need them). – theDmi Sep 16 '15 at 08:56