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

发布时间：2020-12-17 17:49:31 所属栏目：安全来源：网络整理

导读：嗨我有两个单独的模板名为“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-itemio

嗨我有两个单独的模板名为“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,当我点击链接时它没有改变.

提前致谢.

解决方法

我们必须改变一切.我创建了 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’)没有child home.singleLink的目标,所以我们必须使用绝对命名并将其放入root：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!