angularjs - Ui-sref 未在 ionic 框架中生成正确的 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})"

其次子状态 View 目标

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

因为我们的 ListView (状态 'home')，没有 child 的目标 home.singleLink ，我们必须使用绝对命名并将其放入根目录:

views: {
  '@': {

在此处查找更多信息:
View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

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

查一下 here , 类似的东西在这里: Resolving promise with ionic/ui-routing