Ui-sref没有在离子框架中生成正确的URL

Question

嗨,我在模板文件夹中有两个名为"home.html"和"home.singleLink.html"的模板.

home.html看起来像这样

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

我想显示"home.singleLink.html"模板,当用户点击ui-sref中的链接时,它会消失"home.html"模板.我在"家"之后传递一个变量

这是我的app.config看起来像

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

据我所知,当用户点击链接时,ui-sref会生成一个href.但在我的情况下,当我检查链接时,我可以看到一个额外的href ="#/ home"以及ui-sref,当我点击链接时它没有改变.

提前致谢.

Answer 1

我们必须改变一切.我在这里创造了工作的plunker.

首先,国家电话:

<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路由承诺