Question

您好我有两个名为“home.html”＆amp;的模板。模板文件夹中的“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”模板。我在“home”之后传递一个变量

这是我的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'
      }
    }
  })

因为我们的列表视图（州＆＃39; home＆＃39;）没有子home.singleLink的目标，所以我们必须使用绝对命名并将其放入root：

views: {
  '@': {

在此处查找更多信息：

View Names - Relative vs. Absolute Names

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

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

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

检查here，类似的内容：Resolving promise with ionic/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看起来像这样

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

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

2 个答案:

View Names - Relative vs. Absolute Names