11

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

Community
  • 1
  • 1
Arhyaa
  • 369
  • 1
  • 3
  • 21
  • May i see your route provider? – Shian JA Jun 04 '15 at 08:13
  • it may be because of your scope is not accessible to child . more on this find [here.] http://stackoverflow.com/questions/27696612/how-do-i-share-scope-data-between-states-in-angularjs-ui-router it may help you. – developer Jun 04 '15 at 08:21
  • What do you mean ? The link + controller or the module's config ? – Arhyaa Jun 04 '15 at 08: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 Jun 04 '15 at 08:26

1 Answers1

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

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335