CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Timothy
Timothy

Reputation: 1160

UI Router changing URL but not page

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!

Upvotes: 4

Views: 1915

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

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.

Upvotes: 4

Related Questions