Question

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

即：

我们要跳转到的部分：

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

和页面中的其他地方有锚：

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

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

Answer 1

我需要使用$ anchorScroll。

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

Answer 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>

导航到AngularJs中页面内的部分

2 个答案: