Correct anchor transfer in AngularStrap ScrollSpy

How can I use the ScrollSpy interface from AngularStrap correctly to reference bindings in the current document?

Looking at the AngularStrap Documentation I can see that when visiting a link, a double hash is created. For example: http://mgcrea.imtqy.com/angular-strap/##scrollspy

However, when I implement the functionality myself, I do not see such behavior. In my case, anchor tags are trying to update the location, rather than moving to a location in the current document.

My AngularStrap ScrollSpy is on subpage: my-site.com/#/hig. The following definition:

<div class="hig-sidebar hidden-print hidden-sm hidden-xs" role="complementary" data-offset-top="-34" bs-affix bs-scrollspy-list>
  <ul class="nav hig-sidenav">
    <li bs-scrollspy data-target="#overview">
      <a href="#overview">Overview</a>
      <ul class="nav">
        <li bs-scrollspy data-target="#suboverview"><a href="#suboverview">Subsection</a></li>
      </ul>
    </li>
    <li bs-scrollspy data-target="#accessibility"><a href="#accessibility">Accessibility</a></li>
    <li bs-scrollspy data-target="#typography"><a href="#typography">Color and Typography</a></li>
    <li bs-scrollspy data-target="#graphics"><a href="#graphics">Icons and Graphics</a></li>
    <li bs-scrollspy data-target="#navigation"><a href="#navigation">Navigation Design</a></li>
    <li bs-scrollspy data-target="#elements"><a href="#elements">UI Elements</a></li>
    <li bs-scrollspy data-target="#reference"><a href="#reference">Reference</a></li>
  </ul>
  <a href ng-click="gotoTop()">Back to top</a>
</div>

, ScrollSpy . , " ", URL-: my-site.com/#typography.

AngularStrap , , . , #/hig ?

+4
2

, : https://github.com/mgcrea/angular-strap/issues/573

Angularjs , <a href="#overview">Overview</a>, , $routeProvider . , :

:

$scope.scrolltoHref = function (id){
        // set the location.hash to the id of
        // the element you wish to scroll to.
        $location.hash(id);
        // call $anchorScroll()
        $anchorScroll();
    };

HTML:

<a href="" ng-click="scrolltoHref('overview')">Overview</a> 
+1
0

Source: https://habr.com/ru/post/1537134/


All Articles