使用Angular UI路由器在AngularJS中具有历史记录的一个页面上的多个视图

Question

在我的AngularJS应用程序中,我有一个包含几个子部分的页面.所有这些子部分都在同一页面上,并且是同一模板的一部分.但是,我想通过它自己的URL访问每个部分,如果匹配,它将向下滚动到正确的部分.

我已经将状态设置为:

.state('about', {
    url: "/about",
    templateUrl: "partials/about.html",
})
.state('about.team', {
    url: "/about/team",
    templateUrl: "partials/about.html"
})
.state('about.office', {
    url: "/about/office",
    templateUrl: "partials/about.html"
})
.state('about.other', {
    url: "/about/other",
    templateUrl: "partials/about.html"
});

在关于页面我有一个菜单,如:

<div class="menu">
    <a ui-sref-active="selected"
    ui-sref="about.team">The Team</a>
    <a ui-sref-active="selected"
    ui-sref="about.office">The Office</a>
    <a ui-sref-active="selected"
    ui-sref="about.other">Other</a>
</div>

此菜单固定在底部,当用户单击链接或通过地址栏直接访问URL时,它应滚动到该部分(更新需要匹配的URL).

但是我不知道该怎么做(通过Angular).总结一下:

1. 如何通过URL滚动到同一页面上的不同部分？因为我不能使用标准哈希技巧,因为它已经使用哈希作为地址(我们支持IE8).在HTML5模式下我根本不想使用哈希值!它应该在应用程序加载后滚动到页面加载部分,因此需要一些方法来触发在其他内容之后滚动用户的代码...
2. 如何点击按钮才能完成这项工作？当前单击按钮时,它们会更改URL,但不会滚动到内容.

该页面的HTML看起来像:http://pastebin.com/Q60FWtL7

你可以在这里看到这个应用程序:http://dev.driz.co.uk/AngularPage/app/#/about

有关类似内容的示例(https://devart.withgoogle.com/#/about/your-opportunity),您可以看到它根据网页加载后的网址向下滚动到正确的部分...并且不会不要使用哈希,而是使用ACTUAL网址.

Answer 1

我将使用 window.scrollTo 或 jqueryscrollTo 插件创建一个scrollTo指令。

示例： 使用 window.scrollTo滚动到给定项目的 Angular 指令

Jquery 滚动插件：

https://github.com/flesler/jquery.localScroll

https://github.com/flesler/jquery.scrollTo

在页面加载时，您滚动到由主题标签或任何其他 url 参数定义的视图。示例：www.sample.com#aboutUs 或 www.samplecom?view=aboutUs