override angular ui-router for links to page anchors

Question

I have links to anchors on my page (a href="#idea"). ui-router obviously overrides them. Is there a way to use both in harmony? Thank you.

https://gist.github.com/anonymous/2880f2f2c9f91b0b695f#file-gistfile1-txt

score 3 · Accepted Answer · answered Feb 06 '15 at 21:09

3

Well you aren't supposed to use it on a href this way, instead you should add it like the following:

<a href="" ng-click="gotoAnchor()">...</a>

You can see an example of this at the bottom of the $anchorScroll API here.

answered Feb 06 '15 at 21:09

Bricktop

1,549
14
23

Thanks for this aswer Bricktop. Your solution works to a certain extent though. What if I want to use my anchor content as a popup/modal, without using $modal or the UI bootstrap library which in my opinion is still a headache for me to wrap my head around? – AllJs Apr 24 '16 at 06:41
I am not sure if I understand you use case. If you want to feed content to your anchor and a modal then you could do that much more easily through your controller which would feed data to both. – Bricktop Apr 24 '16 at 08:08

score 1 · Answer 2 · answered Nov 02 '16 at 11:25

1

If you want to combine ui-router with anchor tag, I solved my problem using this code

<a ui-sref="routename({'#': 'ownerfeatures'})">Link</a>

answered Nov 02 '16 at 11:25

Nicolas Law-Dune

1,631
2
13
30

score 0 · Answer 3 · answered Oct 28 '15 at 12:23

Hi I had similar problem with anchors.

Since I want to go on using regular HTML syntax (href="#may-hash") I've made a directive which looks if a link is an anchor and if yes perform scroll operations. See detailed code :

/**
 * Ressource : https://docs.angularjs.org/api/ng/service/$anchorScroll
 */
.directive('a', ['$location', '$anchorScroll', function ($location, $anchorScroll) {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs)
        {
            // href should be defined and not empty
            if(typeof attrs.href!=='undefined' && attrs.href.length > 0)
            {
                // href should be an anchor
                if(attrs.href.substring(0, 1) === '#')
                {
                    elem.on('click', function (e)
                    {
                        // if current hash is different from requested hash
                        // then set new hash
                        // no need to call $anchorScroll() 
                        // since scroll is auto if you've not used $anchorScroll.disableAutoScrolling()
                        if ( '#' + $location.hash() !== attrs.href)
                        {
                            $location.hash(attrs.href);
                        }
                        // if hash is the same, force scroll
                        else
                        {
                            $anchorScroll();
                        }

                    });
                }
            }

        }
    };
}])

score 0 · Answer 4 · answered Apr 27 '16 at 09:44

0

Better way to do this is this way say you are on state app.state1.child and your anchor tag is #list, so say that you a tag use this code

<a ui-sref="app.state1.child#list">Link</a>

answered Apr 27 '16 at 09:44

Sachin Sharma

407
5
20

score 0 · Answer 5 · answered Oct 06 '17 at 14:18

I know is an old topic but always get stuck looking a better solution to do the anchoring in my apps.

Today I was looking to scroll in the same page and tested a lot of differents solutions. Most of the time this one is the general recommendation:

<a ui-sref="routename({'#': 'ownerfeatures'})">Link</a>

The problem with this one is works to transition to a new state and go to the anchor but doesn't work well if you want to just scroll in the same page, because it only works the first click.

Then I realize that the use of $anchorScroll should be great for this and I made this directive maybe can help someone. Note I didn't use location.hash, because I don't want to add the hash to my address bar and also there where some situations in my flow that make the screen scroll when not required.

 function anchorScroll($anchorScroll){
    return {
      restrict: 'A',
      scope: {
        target: '=anchorScroll'
      },
      link: function ( scope, element, attrs ) {
        element.bind('click', function(event) {
          console.log(scope.target)
          $anchorScroll(scope.target);
        })
      }
    }
  }

But the also there is a very simplest way, just using $anchorScroll in the template. In your controller:

$scope.anchorScroll = $anchorScroll;

And in the view:

<a href="" ng-click="anchorScroll('nameOfTheAnchor')">Scroll to ID</a>

override angular ui-router for links to page anchors

5 Answers5