0

I want to link to an element on the same page. I followed the link below but for some reason it redirecting me to the same URL with #id attached to the URL, I have html5Mode enabled.

How to handle anchor hash linking in AngularJS

directive code

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);
        }
    };
});

Any help will be much appreciated. Thanks

UPDATE

Its inside a 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>

as you hover over a list item, it shows the complete record on the side which has the link it should scroll to.

Community
  • 1
  • 1
Chirdeep Tomar
  • 4,281
  • 8
  • 37
  • 66

1 Answers1

0

Does your attrs.id value contain the hash? If so, it shouldn't. You only need the id value, without the hash.

Also, your ng-click=scrollTo(id) is missing quotes:

<em ng-click="scrollTo('idName')">
Kieren Hughes
  • 574
  • 3
  • 8