Ui-sref 没有在 ionic Framework 中生成正确的 url

Question

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

首页.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"模板就会消失。我在"家"之后传递一个变量

这是我的应用程序.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的目标，我们必须使用绝对命名并将其放入根目录中：

views: {
  '@': {

在此处查找更多信息：

视图名称 - 相对名称与绝对名称

在幕后，每个视图都被分配一个遵循viewname@statename方案的绝对名称，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如 contact.item。您还可以选择以绝对语法编写视图名称。

例如，前面的示例也可以写成：

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

在这里检查，类似的东西在这里：使用ionic/ui路由解决承诺

Answer 2

由于您的模板被命名为 home.html 和 home.singleLink.html我假设 singleLink 是 home 的孩子。您的配置应如下所示。

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

而你的家.html应该是这样的

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