Ui-sref is not generating the right url in ionic framework

Question

Hi I have two separate templates named "home.html" & "home.singleLink.html" in templates folder.

home.html looks like this

<ion-list>  
 <ion-item ng-repeat="link in links">   
  <a class="button button-clear" ui-sref="home({singleLink: link.name})">{{link.name}}</a> 
 </ion-item>
<ion-list>

And I want to show "home.singleLink.html" template and vanishes the "home.html" template when a user click on the link what is in ui-sref. I am passing a variable after the "home"

Here is my app.config looks like

$stateProvider
.state('home', {
  url: '/home',
  templateUrl: 'templates/home.html',
  controller: 'linksController'
})
.state('home.singleLink', {
  url: '/:singleLink',
  templateUrl: 'templates/home.singleLink.html',
  controller: 'linksController'
})

As per I know ui-sref will generate a href when a user click in the link. But in my case when I inspect the link I can see a additional href="#/home" along with the ui-sref which is not changing when I click in the link.

Thanks in advance.

Answer 1

We have to change to things. I created working plunker here.

Firstly, the state call:

<ion-list>  
 <ion-item ng-repeat="link in links">   
  <a class="button button-clear" 
    ui-sref="home.singleLink({singleLink: link.name})">{{link.name}}</a> 
 </ion-item>
</ion-list>

As we can see, the ui-sref is now different

// instead of this:
ui-sref="home({singleLink: link.name})"
// we have to use full state name home.singleLink
ui-sref="home.singleLink({singleLink: link.name})"

Secondly the child state view target

  .state('home.singleLink', {
    url: '/:singleLink',
    views: {
      '@': {
        templateUrl: 'templates.home.singleLink.html',
        controller: 'linksController'
      }
    }
  }) 

Because our list view (state 'home'), does not have target for child home.singleLink, we have to use absolute naming and place it into root:

views: {
  '@': {

Find more here:

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

Check it here, Similar stuff here: Resolving promise with ionic/ui-routing

Answer 2

Since your templates are named home.html and home.singleLink.html I am assuming singleLink is a child of home. Your config should look like this.

$stateProvider
  .state('home', {
     url: '/home',
     views: {
      'home': {
         templateUrl: 'templates/home.html',
         controller: 'linksController'
       }
     }   
  })
 .state('home.singleLink', {
    url: '/singleLink',
    views:{
      'singleLinkView': {
       templateUrl: 'templates/home.singleLink.html',
       controller: 'linksController'
    }
 }

And your home.html shoul look like this

<ion-list>  
   <ion-item ng-repeat="link in links">   
      <a class="button button-clear" ui-sref="home.singleLink">{{link.name}}</a> 
   </ion-item>
<ion-list>