UI Router changing URL but not page

Question

I'm not able to get UI Router to work properly on my page. It works fine for the navigation links, but not for the specific section I'm working on. I was able to recreate the issue in a plnkr (http://plnkr.co/edit/unQKWfkoSGdqaoncEPgG) and even compared it to an "official" plnkr that works fine and I don't see any differences. When I click a link, the URL changes, but the new page doesn't display.

$stateProvider
.state('home', {
  abstract: true,
  url: '/home',
  templateUrl: 'home.html',
  controller: function($scope){}
})
.state('home.resource', {
  url: '/resource',
  templateUrl: 'resource.list.html',
  controller: function($scope){}
})
.state('home.resource.edit', {
  url: '/edit/:id',
  templateUrl: 'resource.edit.html',
  controller: function($scope){}
});

Here's where the link is clicked:

<a ui-sref='.edit({id: 1})'>Go to edit</a>

Any help is appreciated. Thanks!

Radim Köhler · Accepted Answer · 2014-10-13 17:46:52Z

4

Here is the updated plunker, with this update

<h4>resource index list</h4>
<ul>
  <li><a ui-sref='.edit({id: 1})'>Go to edit</a>
  <!-- 
     this line below was added
     it is an anchor/target for unnamed view
     defined in the home.resource.edit state
   -->
  <div ui-view=""></div>
</ul>

So what we can see, is that even this state needs its own anchor, target:

// this is the parent state
.state('home.resource', {
  url: '/resource',
  templateUrl: 'resource.list.html',
  controller: function($scope){}
})

// child state needs its own target <div ui-view="">
.state('home.resource.edit', {
  url: '/edit/:id',
  templateUrl: 'resource.edit.html', // this template will be injected into parent
  controller: function($scope){}
});

Check it here

There is also another option. We can target the same ui-view as parent does. It will in fact replace parent. The definition then would be like this plunker with this state:

.state('home.resource.edit', {
  url: '/edit/:id',
  views : {
  '@home' : { 
    templateUrl: 'resource.edit.html',
    controller: function($scope){}
    }
  }
});

What we use here is the named view:

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.

edited Oct 13, 2014 at 17:46

answered Oct 13, 2014 at 17:34

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

3 Comments

Timothy Over a year ago

That still just changes the URL and doesn't actually update the content with the html page provided in the $stateProvider, 'resource.edit.html'.

Radim Köhler Over a year ago

Could you check my updated plunker again? What was missing was the target for 'home.resource.edit'. This target is searched in its parent

Timothy Over a year ago

Got it. That makes sense. Your second edit was the behavior I was looking for. Thanks a lot!

Collectives™ on Stack Overflow

UI Router changing URL but not page

1 Answer 1

View Names - Relative vs. Absolute Names

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related