Ui-sref 未在离子框架中生成正确的 url [英] Ui-sref is not generating the right url in ionic framework

问题描述

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

Hi I have two separate templates named "home.html" & "home.singleLink.html" in templates folder.

home.html 看起来像这样

home.html looks like this

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

And I want to show "home.singleLink.html" template and vanishes the "home.html" template when a user click on the link what is in ui-sref. I am passing a variable after the "home"

这是我的 app.config 看起来像

Here is my app.config looks like

$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，当我点击链接时它不会改变.

As per I know ui-sref will generate a href when a user click in the link. But in my case when I inspect the link I can see a additional href="#/home" along with the ui-sref which is not changing when I click in the link.

提前致谢.

推荐答案

我们必须有所改变.我创建了在这里工作的plunker.

We have to change to things. I created 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 现在不同了

As we can see, the ui-sref is now different

// 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的目标，我们必须使用绝对命名并将其放入根目录:

Because our list view (state 'home'), does not have target for child home.singleLink, we have to use absolute naming and place it into root:

views: {
  '@': {

在此处查找更多信息:

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

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

检查它这里，这里有类似的东西:使用ionic/ui-routing解决promise

Check it here, Similar stuff here: Resolving promise with ionic/ui-routing

这篇关于Ui-sref 未在离子框架中生成正确的 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！