Angular UI-Router : URL changed but view isn't loaded

Question

I'm working on my UI-Router app with nested views. I defined some states like this:

 $stateProvider

    .state('parent', {
      url: "/parent",
       views: {
         'area1': {templateUrl : 'parentView.html'},
         'area2' : ... // some other areas + template
       }
    })

    .state('parent.child1', {
      url: "/child1",
       views: {
          'area1' : {templateUrl : 'child1View.html'},
          'area2' : ...  // still some other areas, not changing 
       }
    })

    .state('parent.child2', {
      url: "/child2",
       views: {
          'area1' : {templateUrl : 'child2View.html'},
          'area2' : ...  // still some other areas, not changing 
       }
    })

When using the app, I have a main view divided into some areas. In the 1st area, I use a specific html file. If I click on a link, the app goes to a child state using $state.go('myState'). At that time, the URL is changed but the child view isn't loaded in the page.

I searched for answers in the site, and I found this question from another one who seems to encounter the same problem here : Angular Router - Url changes but view does not load

Do you know what I missed?

Sorry for bad English

it may be because of your scope is not accessible to child . more on this find [here.] stackoverflow.com/questions/27696612/… it may help you. — developer
– developer, Commented Jun 4, 2015 at 8:21
What do you mean ? The link + controller or the module's config ? — Arhyaa
– Arhyaa, Commented Jun 4, 2015 at 8:22
@developer I'm not using $scope here. I only try to load a view, without any controller. How could the scope prevent it ? — Arhyaa
– Arhyaa, Commented Jun 4, 2015 at 8:26

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

There is a working plunker

Most likely the index.html contains these targets:

<body>
    <div ui-view="area1"></div>
    <div ui-view="area2"></div>
    ...

So, if both, parent and child do target these, we need to use absolute naming:

.state('parent.child1', {
  url: "/child1",
   views: {
      'area1@' : {template : '<h2>child 1 area 1 </h2>'},
      'area2@' : {template : '<h2>child 1 area 2</h2>'},
   }
})

.state('parent.child2', {
  url: "/child2",
   views: {
      'area1@' : {template : '<h2>child 2 area 1 </h2>'},
      'area2@' : {template : '<h2>child 2 area 2</h2>'},
   }
})

Let's observe doc:

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@': { }
    }
})

So, our child needs to use 1) view target Name 2) delimiter @ and 3) the state name (in our string empty representing the root): 'area1@'

These links, similar to $state.go() will work now:

  <a ui-sref="parent">
  <a ui-sref="parent.child1">
  <a ui-sref="parent.child2">

Check it here

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 4, 2015 at 8:31

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

Radim Köhler Over a year ago

If that helped, great ;) Enjoy amazing UI-Router, sir

Collectives™ on Stack Overflow

Angular UI-Router : URL changed but view isn't loaded

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related