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

我们必须改变事物。我创建了working plunker here。

首先，状态调用：

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

在这里找到更多：

View Names - Relative vs. Absolute Names

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

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

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

检查它here，类似的东西在这里：Resolving promise with ionic/ui-routing

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

你的 home.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>