过渡更新网址从子到父状态UI路由器

编程入门 行业动态 更新时间:2024-10-28 02:34:16
本文介绍了过渡更新网址从子到父状态UI路由器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我有一个角(1.2.1)的应用程序运行的UI路由器(0.2.13),下面的国家结构:

I have an Angular (1.2.1) app running UI-router (0.2.13), and the following state structure:

$stateProvider.state('home', { template: "<div home></div>", url: '/' }).state('home.geo', { url:'/geo/{geo}' }

从过渡父到子或不同的 {地质} 参数值按预期工作子女之间。从孩子过渡到父母的工作 - 即模板的内容和预期$ state.current变化 - 但是URL不会在浏览器更新。

Transitioning from parent to child or between children with different {geo} parameter values works as expected. Transitioning from child to parent works - i.e. the contents of the template and $state.current change as expected - but the URL does not update in the browser.

需要明确的是,一个例子:我在 /地理/加利福尼亚键,我点击与 UI-SREF ='家'按钮。我已经确认了正确的的href ='#/ 一直放在按钮,点击它会导致$状态转换回家乡,但 /地理/加利福尼亚留在我的地址栏。

To be clear, an example: I'm in /geo/california and I click a button with ui-sref='home'. I've confirmed that the correct href='#/' has been placed on the button, and clicking it causes the $state to transition back to the home state, but /geo/california remains in my address bar.

我缺少的是在这里吗?

What am I missing here?

更新在respose为@ UlukBiy的评论:没有,首页没有在其模板的用户界面视图。用户界面视图是在它的父模板:整体结构是:

Update in respose to @UlukBiy's comment: No, home does not have a ui-view in its template. The ui-view is in the template of it's parent: The overall structure is:

<body> <div app-nav></div> <div ui-view></div> </body>

所以家里指令​​被插入到用户界面视图,但它包含本身没有UI的意见。那是我的问题吗?我是新来的用户界面的路由器,并承担有国家有关指令主场迎战的作用,一些低级的误解时,我张贴了这个。如果是的话,请帮我更正。

So the home directive gets inserted into the ui-view, but it contains no ui-views of its own. Is that my problem? I'm new to UI-router, and assumed there was some low-level misunderstanding about the role of states vs. directives when I posted this. If so, please help me correct it.

推荐答案

此情况下应该是工作。有工作的例子的(点击蓝色按钮右侧顶在单独的窗口中运行的例子,显示地址栏)的

This scenario should be working. There is a working example (click the blue button right-top to run example in separate window, showing the address bar)

我更新您的状态DEF了一下:

I updated your state def a bit:

$stateProvider .state('home', { url: "/", template: 'Home view <hr /> Geo view: <div ui-view></div>', }) .state('home.geo', { url:'^/geo/{geo}', templateUrl: 'tpl.html', })

所有这些环节都按预期工作:

All these links do work as expected:

<a href="#/home"> <a href="#/geo/california"> <a href="#/geo/czechia"> <a ui-sref="home"> <a ui-sref="home.geo({geo:'california'})"> <a ui-sref="home.geo({geo:'czech'})">

所以,在这里最重要的变化是,对于一个孩子的状态,我们应该利用这个网址:

So, the most important change here is that for a child state we should use this url:

url:'^/geo/{geo}',

而不是网​​址:'/地理/ {}缘。检查DOC:

如果您想拥有绝对的URL匹配,那么你就需要preFIX您的网址字符串以特殊符号'^'。

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

检查工作的例子 rel=\"nofollow\">

Check the working example here

更多推荐

过渡更新网址从子到父状态UI路由器

本文发布于:2023-11-01 22:48:28,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1550632.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:路由器   状态   网址   从子   UI

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!