AngularUI Router:在调用子状态时将 url 参数传递给“抽象”状态

2024-05-09

我想在调用子状态时访问抽象状态内的 url 参数($stateParam)。我很想知道如何做到这一点。代码在笨蛋也 http://plnkr.co/edit/L0TXx3DCBOJmh4XydXbV?p=preview

$stateProvider
    .state('contacts', {
        abstract: true,

        //my whole point is to get the id=1 here :(

        url: '/contacts/:id',
        templateUrl: function($stateParams){
            console.log("Did i get the child's parameter here? " + $stateParams.id)
            return 'contacts' + $stateParams.id + '.html'; //this will have a ui-view in it which will render its detail.
        }
    })

    .state('contacts.detail', {
        url: '/:id',
        // loaded into ui-view of parent's template
        templateUrl: 'contacts.detail.html',
        controller: function($scope, $stateParams){
          $scope.person = $scope.contacts[$stateParams.id];
        },
        onEnter: function(){
          console.log("enter contacts.detail");
        }
    })
})

`

我称之为

<a ui-sref="contacts.detail({id: 1})">My first contact<a>

我为什么要这样做?因为,我的服务器模板对于不同的联系人是不同的,布局也不同。


Well, 在 GitHub 上发布问题 https://github.com/angular-ui/ui-router/issues/1197从合作者那里得到了答案。

所以,事情就是这样。即使参数携带相同的信息,它们也必须“命名不同”。有点奇怪,但是有效。

在模板中:

<a ui-sref="contacts.detail({id: 1, duplicate_id: 1})">My first contact<a>

并在 JavaScript 中

`

$stateProvider
    .state('contacts', {
        abstract: true,

        //my whole point is to get the id=1 here :(

        url: '/contacts/:duplicate_id', //using duplicate_id here
        templateUrl: function($stateParams){} //...$stateParams will have :duplicate_id key
    }) 


    .state('contacts.detail', {
        url: '/:id', //using the real one here
        templateUrl: function($stateParams){} //....$stateParams will have :id key

    });

` 更新:我发现这种情况下的 url 重复相同的属性两次,到目前为止这对我来说没问题。欢迎任何建议。

希望这可以帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularUI Router:在调用子状态时将 url 参数传递给“抽象”状态 的相关文章

随机推荐

  • 在React-native中,如何更改NavigatorIOS的样式

    在react native中 如何更改NavigatorIOS的样式 例如背景颜色 谢谢你 var speedNews React createClass render function return
  • 从 Activity 调用选项卡式片段方法

    我有一项活动由三个片段组成 这些片段使用使用 PagerAdapter 的操作栏选项卡 我想要做的是从主活动访问活动选项卡式片段中的方法 我已经尝试了下面的代码 但这只是将片段返回为空 所以我猜它无法在选项卡中找到它 NPListFragm
  • R markdown 引文标识符

    R markdown 允许使用 YAML 元数据部分中的参考书目元数据字段指定参考书目文件 例如 title Sample Document output html document bibliography bibliography bi
  • 将非算术类型作为参数传递给 cmath 函数是否有效?

    给定以下用户定义类型S具有转换功能double struct S operator double return 1 0 以及以下调用cmath http en cppreference com w cpp header cmath使用类型的
  • 导入 Haskell 模块

    我是哈斯克尔的新手 为什么当我尝试使用时Days from Data Time我收到此错误 Could not find module Data Time It is a member of the hidden package time
  • 使用 keyup 事件仅触发表单验证中文本框的部分规则,并取消其余规则的事件

    我的应用程序中有一个表单 我正在使用 jQuery 表单验证插件对其进行验证 其中一项规则是远程类型 用于验证用户名是否不存在 我已经能够覆盖 onkeyup 事件 因此规则不会为我输入的每个字母发送到服务器 我完成的方式如下 var va
  • CLion 2019.2.1 工具链:未找到 WSL

    我通过 Windows 商店安装了 Ubuntu 然后按照此处的 Jetbrains CLion WSL 设置指南进行操作 https www jetbrains com help clion how to use wsl developm
  • 设计 Javascript 前端 <-> C++ 后端通信

    在我最近的将来 我将不得不制作一个具有 C 后端和 Web 前端的系统 要求 目前 我对此了解不多 我认为前端将触发数据传输 而不是后端 所以不需要类似 Comet 的东西 由于在该领域的经验可能很少 我非常感谢您对我所做的设计决策的评论
  • Rails - 使链接与 ajax 一起工作

    我有一个链接 应该使用 ajax 加载它旁边的部分内容 而无需重新加载页面 链接在这里 这是链接应该转到的控制器 class ProfilesController lt ApplicationController def profile f
  • 反转二进制网络

    如何反转二元方程 以便找到哪些输入将产生给定的输出 Example Inputs i0 through i8 Outputs o0 through o8 Operators XOR AND 二元方程 1 i0 1 i1 0 i2 1 i3
  • 用于真实 Web 项目的 Scala-JS [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 有人用过吗Scala JS在真实的网络项目中 但不仅仅适用于普通的JavaScript在隔离环境中替换 我想尽可能多地使用 Scala 我希望可
  • JavaScript - 这个这个

    String prototype foo String prototype foo bar function How can you reference the grandparent string console log this par
  • 如何使用 terraform 创建 azure 应用程序注册和客户端密钥

    我正在尝试为 Azure 应用程序注册和客户端密钥创建 Terraform 代码 对订阅具有读取访问权限的服务主体 基本上 我正在尝试将 Azuresafe 与 Terraform 集成 并尝试确定如何逐步配置 https docs saf
  • 为什么这个 CSS nowrap 不起作用?

    我试图阻止 bar top container div 包裹它的内容 无论页面有多宽 即两个选择应该始终出现在同一行 但是当页面宽度太小而无法容纳它们时 这不起作用一方面 我该如何解决这个问题 Styles bar top containe
  • 不兼容的类型 - 是因为数组已经是指针吗?

    在下面的代码中 我创建一个基于书籍结构的对象 并让它保存多个 书籍 我设置的是一个数组 即定义 启动的对象 然而 每当我去测试我对指针的了解 实践有帮助 并尝试创建一个指向创建的对象的指针时 它都会给我错误 C Users Justin D
  • 如何得到将外力映射到广义力的矩阵?

    给定一个多体植物 我需要找到将外力 lambda 转换为广义力的矩阵 IE 以下方程中的 Phi 取自 Scott Kuindersma Frank Permenter 和 Russ Tedrake 的 稳定动态运动的有效可解二次规划 我的
  • 检查 href 中是否存在 jQuery 中的查询字符串

    我目前有一段 jQuery 用于附加带有一些位置信息的 URL jQuery a attr href function return this href location 123 abc 我的问题是大多数链接都有一个 其中使用上面的 就可以
  • 无法匹配任何路线。 URL 段:'':尝试使用子路由和 Ng2 时

    I have 以下笨蛋 https plnkr co edit PHaGNtfa0fPBgET4NEpZ p preview 这是行不通的 为了让它发挥作用 我可以评论 RouterModule forRoot path component
  • 显示带有 jQ​​uery-ui 自动完成功能的微调器

    我一直在到处搜索 但没有看到有人这样做 是否有可能拥有某种带有 jQ uery UI 自动完成功能的旋转器 加载器 1 8 获取数据时 我的解决方案是使用 ui autocomplete loading CSS 类 该类在 ajax GET
  • AngularUI Router:在调用子状态时将 url 参数传递给“抽象”状态

    我想在调用子状态时访问抽象状态内的 url 参数 stateParam 我很想知道如何做到这一点 代码在笨蛋也 http plnkr co edit L0TXx3DCBOJmh4XydXbV p preview stateProvider