AngularJS - 使用书签答案

【问题标题】：AngularJS - Using BookmarksAngularJS - 使用书签
【发布时间】：2013-12-30 13:56:09
【问题描述】：

我正在尝试使用 AngularJS 创建一个应用程序。目前，我的应用程序只有一个视图。我的应用程序将有多个视图。此时我的 index.html 文件如下所示：

index.html ...

    Choose:
    <a href="/view-1">View 1</a> |
    <a href="/view-2">View 2</a>

    <div class="view-animate-container">
      <div id="driver" ng-view class="view-animate" style="margin: 0; padding: 0; height: 100%;"></div>
      </div>
      <hr />
    </div>
</body>

view1.html

<div>
    <div style="position:fixed;">
        <h1>View 3</h1>
        <div>
            <a href="#sectionA">Section A</a> | <a href="#sectionB">Section B</a> | <a href="#sectionC">Section C</a>
        </div>
    </div><br /><br /><br /><br />

    <div style="overflow-y:scroll">
        <h2 id="sectionA">Section A</h2>
        <div style="background-color:navy; color:white;">
            Some text content goes here.
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            Yup.
        </div>

        <h2 id="sectionB">Section B</h2>
        <div style="background-color:red; color:white;">
            Some text content goes here.
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            Yup.
        </div>

        <h2 id="sectionC">Section C</h2>
        <div style="background-color:peachpuff; color:black;">
            Some text content goes here.
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            Yup.
        </div>
    </div>
</div>

main.js

angular.module('myApp', ['ngRoute', 'ngAnimate'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/view-1', {
            templateUrl: '/views/view1.html',
            controller: View1Ctrl
        });

        $routeProvider.when('/view-2', {
            templateUrl: '/views/view2.html',
            controller: View2Ctrl
        });

        // configure html5 to get links working on jsfiddle
        $locationProvider.html5Mode(true);
    })
;

function View1Ctrl($scope, $routeParams) {
    this.name = "View1Cntl";
    this.params = $routeParams;
}

function View2Ctrl($scope, $routeParams) {
    this.name = "View2Cntl";
    this.params = $routeParams;
}

我正在尝试让我的书签（锚标记）在 view1 中工作。每当我单击“A 部分”、“B 部分”或“C 部分”时，路线都会更新。然后视图重新动画到屏幕中。最后，视图被定位到相应的部分。所以问题是视图会重新加载。实际上，我只想在有人点击时跳转到页面中的书签。我如何在 AngularJS 中做到这一点？

谢谢！

【问题讨论】：

这应该有助于stackoverflow.com/questions/14026537/anchor-links-in-angularjs
感谢您的帖子。但是，我遇到的问题是所有答案都是 AngularJS 1.2 之前的版本。从 AngularJS 1.2 开始，我开始遇到书签问题。

标签： javascript angularjs

【解决方案1】：

我能够使用scrollTo 函数完成类似的行为，并将href 替换为调用它的ng-click 标记。

main.js

$scope.scrollTo = function(selector) {
    window.scrollTo(0, $(selector)[0].offsetTop - 100);
}

view1.html

<div>
  <a ng-click="scrollTo('#sectionA')">Section A</a> |
  <a ng-click="scrollTo('#sectionB')">Section B</a> |
  <a ng-click="scrollTo('#sectionC')">Section C</a>
</div>

<h2 id="sectionA">Section A</h2>
<div style="background-color:navy; color:white;">
    Some text content goes here.
</div>

<h2 id="sectionB">Section B</h2>
<div style="background-color:navy; color:white;">
    Some text content goes here.
</div>

<h2 id="sectionC">Section C</h2>
<div style="background-color:navy; color:white;">
    Some text content goes here.
</div>

【讨论】：

【解决方案2】：

我得到了最好和最简单的解决方案：

将href="#bottom" 链接替换/更改为/#/dashboard#bottom

/#/dashboard 是我（当前）/想要滚动的页面，#bottom 是锚链接。

我有标签被翻转，使用上述方法我无法完全按照我想要的方式解决问题。靠着上帝的恩典，我得到了一个小小的 hacky 解决方案 :)

【讨论】：