导航到 AngularJs 中页面内的部分答案

【问题标题】：Navigate to section inside a page in AngularJs导航到 AngularJs 中页面内的部分
【发布时间】：2014-01-27 18:19:53
【问题描述】：

有没有办法在页面中使用角度导航到特定定义的部分而不会导致路由服务工作？

即：

我们要跳转到的部分：

<a name="tips">
    <div>Tips and tricks...</div>
</a>

页面的其他地方有锚点：

<a href="#tips">jump to tips and tricks</a>

现在我想到的第一件事就是在默认路由功能处停止路由引擎中的导航。检查请求的 url 是否是内页链接并中止导航。

【问题讨论】：

你应该看看这个问题，我觉得是一样的stackoverflow.com/questions/14026537/anchor-links-in-angularjs
@sunderls 谢谢。我尝试了 ng-href，但它触发了 ngRoute 机制等。我将创建一个 plunk 或 jsFiddle，它将在今天晚些时候描述这个问题。

标签： html angularjs anchor

【解决方案1】：

我需要使用 $anchorScroll。

http://docs.angularjs.org/api/ng.$anchorScroll

【讨论】：

【解决方案2】：

根据angularjs 1.x的js文件：

angular.module('ur-ng-app').run(['$anchorScroll', function ($anchorScroll) {
    $anchorScroll.yOffset = 70; // always scroll by 50 extra pixels
}])
.controller('ur-controller', ['$anchorScroll', '$location', '$scope',
    function ($anchorScroll, $location, $scope) {
        $scope.gotoAnchor = function (x) {
            var newHash = 'anchor' + x;
            var old = $location.hash();
            if ($location.hash() !== newHash) {
                $location.hash('anchor' + x);
                $anchorScroll(newHash);
                $location.hash(old);
            } else {
                $anchorScroll(newHash);
                $location.hash(old);
            }
        };
    }
]);

html 文件：

<div class="well">
<div class="container" ng-controller="ur-controller">
    <a ng-click="gotoAnchor(1)">Accordion</a>
    <a ng-click="gotoAnchor(2)">Alert</a>
</div>

<div id="anchor1" class="col-md-12 portlets ui-sortable">
    <div class="panel">
        <div ng-include="'sample'"></div>
    </div>
</div>
<div id="anchor2" class="col-md-12 portlets ui-sortable">
    <div class="panel">
        <div ng-include="'sample'"></div>
    </div>
</div>
<div id="anchor3" class="col-md-12 portlets ui-sortable">
    <div class="panel">
        <div ng-include="'sample'"></div>
    </div>
</div>
</div>

【讨论】：