Question

我使用了角度ui路由器，就像

一样

.state('home', {
        url: '/home',
        templateUrl: 'view/home/home.html',
        controller: 'homeCtrl'
    })
.state('guide', {
        url: '/guide',
        templateUrl: 'view/guide/guide.html',
        controller: 'guideCtrl'
    })

我可以使用网址http://localhost:8000/dist/#/home在浏览器中访问但是，我不能在我的HTML中使用锚点如果home.html中有一个像这样的锚

<a href="#aaa">scroll to aaa</a>
....
<h1 id="aaa">AAA</h1>

当我点击“滚动到aaa”时，网址将为http://localhost:8000/dist/#/aaa 并返回一个空白页.home.html中的锚点不起作用。

如何解决此问题？

Answer 1

确保你的ui-router版本比0.2.14更新，这是第一个在ui-router中支持html锚点的版本。可以找到所有版本on github，我首先注意到it was supported。

鉴于您的路由设置：

.state('home', {
    url: '/home',
    templateUrl: 'view/home/home.html',
    controller: 'homeCtrl'
})
.state('guide', {
    url: '/guide',
    templateUrl: 'view/guide/guide.html',
    controller: 'guideCtrl'
})

在任何视图上创建链接：

<a href="" ui-sref="home({'#': 'aaa'})">Scroll to AAA</a>

在页面视图/ home / home.html

....
....
<h1 id="aaa">AAA</h1>

Answer 2

将ui-sref与href标签一起使用。 href用于指向页面的本地ID。并且ui-sref应该指向同一页面的状态。例如，

<a href="myId" ui-sref="stateOfCurrentPage"> any Link </a>

这会使页面滚动到requires元素而不向您的网址添加任何内容。

使用

等语法

ui-sref="home({'#': 'aaa'})"

将导致完成工作，但会将哈希添加到网址。当您使用其他框架（如jQuery）时，这也会产生语法错误。

如何使用ui路由器

2 个答案: