Question

我想链接到同一页面上的元素。我按照下面的链接但由于某种原因它将我重定向到链接#id的相同URL，我启用了html5Mode。

How to handle anchor hash linking in AngularJS

指令代码

var commonComponentsApp = commonComponentsApp || angular.module('cpUtils', []);
commonComponentsApp.directive("highlight", function ($location, $compile, $anchorScroll) {
    'use strict';
    return {
        restrict: "A",
        controller: function ($scope) {
            $scope.scrollTo = function (id) {
                console.log(id);
                $location.hash(id);
                $anchorScroll();
            }
        },
        link: function (scope, element, attrs) {
            var hightedText = attrs.highlight;
            hightedText = hightedText.replace("<em", "<em ng-click=scrollTo('" + attrs.id + "')");
            var item = '<p>' + hightedText + '</p>';
            var e = angular.element(item);
            e = $compile(e)(scope);
            element.html(e);
        }
    };
});

任何帮助将不胜感激。感谢

更新

它在ng-repeaet内部

 <li id="document-{{$index}}" ng-repeat="document in query.response.result" ng- mouseenter="select(document, $index)" bubble>
                <div class="description-wrapper">
                    ......
                    <hr />
                    <p highlight="{{query.response.highlighted[document.id].text[0]}}" id="{{document.id}}"></p>
                    .....
                </div>
            </li>

当您将鼠标悬停在列表项上时，它会显示侧面的完整记录，其中包含应滚动到的链接。

Answer 1

你的attrs.id值是否包含哈希值？如果是这样，那就不应该了。您只需要id值，不需要哈希值。

此外，您的ng-click = scrollTo（id）缺少引号：

<em ng-click="scrollTo('idName')">

Angularjs Hash将重定向链接到新URL

1 个答案: