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模板并消失home.html用户点击链接时ui-sref中的模板。我在home之后传递一个变量

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.

提前致谢。

推荐答案

我们必须改变一切。我在这里创建了 work 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 ，我们必须使用绝对命名并将其放入root：

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是view指令中使用的名称，state name是状态的绝对名称，例如contact.item。您也可以选择以绝对语法编写视图名称。

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

检查此处，类似这里的东西：用离子/ ui路由解决承诺

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

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