Ui-sref does not generate the correct url in ionic structure

Question

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

home.html looks like

<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 the template "home.singleLink.html" and access the desired template "home.html" when the user clicks on the link that is in ui-sref. I pass the variable after "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 you know, ui-sref generates href when a user clicks on a link. But in my case, when I check the link, I see an additional href = "# / home" along with ui-sref, which does not change when I click on the link.

Thanks in advance.

Answer 1

. .

-, :

<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>

, ui-sref

// 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})"

-,

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

( "home" ) home.singleLink, root:

views: {
  '@': {

:

-

, viewname@statename, viewname - , , - , . contact.item. .

, :

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

, : /ui-routing

Answer 2

home.html home.singleLink.html, , singleLink . .

$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'
    }
 }

home.html shoul

<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>