1

In my application I've got an overview of different franchise locations which are coming from an online service. Every location has a link which should normally go to a new nested state. My state looks like this, I'm also using resolve so that I can search for the location by id.

        .state('locations', {
            url: "/locations",
            controller: "FranchiseCtrl",
            templateUrl: "partials/locations.html"
        })
        .state('locations.location', {
            params: {
                locationId : "defaultID", 
                locationName: "defaultName"
            },
            url: "/:locationName",
            controller: "LocationCtrl",
            templateUrl: "partials/location.html",
            resolve:   {
                loc:  function($http, $stateParams) {
                    var url = "url/to/service/" + $stateParams.locationId + "/en";
                    return $http.get(url)
                        .then(function(res){ return res.data; });
                }
            }
        })

This is the link in the locations.html

<a ui-sref="locations.location({ locationId: location.id, locationName: location.name })">Go to location</a>

When I click on the link my url changes to the correct location but i'm not going to the templateUrl for the state.

Improve this question

1 Answer 1

Reset to default
3

There is a working plunker

Very often in this cases, we forget to create a target for a child. Other words, parent state template templateUrl: "partials/locations.html" should contain

<div ui-view=""></div>

So in the plunker we can see parent 'partials/locations.html' template:

<div>
  <h2>parent</h2>
  
  <hr />
  
  <div ui-view=""></div> // this is the key to show child
  
</div>

And the child 'partials/location.html' could be e.g.:

<div>
  <h3>current state name: <var>{{$state.current.name}}</var>  
</div>

Check it here

In case, we want to target the index.html ui-view="", we have to use absolute naming. Check the adjusted plunker here

.state('locations.location', {
    params: {
        locationId : "defaultID", 
        locationName: "defaultName"
    },
    url: "/:locationName",
    views: {
      '@' : {
        controller: "LocationCtrl",
        templateUrl: "partials/location.html",
            resolve:   {
            loc:  function($http, $stateParams) {
                var url = "url/to/service/" + $stateParams.locationId + "/en";
                return $http.get(url)
                    .then(function(res){ return res.data; });
            }
      }
    }

check it here

The documentation and explanation:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.

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

4 Comments

I'm using ui-view in my index.html where all my states are being shown
I appended an example, it should help to understand what I mean
Yes now i'm getting my data beneath my parent view, is there a way where I can get the child-view without the parent-view?
Yes there is a way. I created new plunker for you and appended link and extract from doc. Enjoy mighty UI-Router ;)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.