Якорные ссылки в Angularjs?

Ответ 1

Есть несколько способов сделать это.

Вариант 1: Родной Angular

Angular предоставляет службу $anchorScroll, но документация сильно отсутствует, и я не смог заставить ее работать.

Ознакомьтесь с http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html, чтобы узнать о $anchorScroll.

Вариант 2: пользовательская директива/собственный JavaScript

Еще один способ, которым я тестировал, - создать пользовательскую директиву и использовать el.scrollIntoView(). Это работает довольно прилично, в основном делая следующее в вашей функции ссылки:

var el = document.getElementById(attrs.href);
el.scrollIntoView();

Однако, кажется, немного раздутый, чтобы сделать оба из них, когда браузер изначально поддерживает это, не так ли?

Вариант 3: Angular Переопределить/собственный браузер

Если вы посмотрите на http://docs.angularjs.org/guide/dev_guide.services.$location и его раздел перезаписи HTML-ссылок, Посмотрим, что ссылки не переписаны в следующем:

Ссылки, содержащие целевой элемент

Пример: <a href="/ext/link?a=b" target="_self">link</a>

Итак, все, что вам нужно сделать, это добавить атрибут target к вашим ссылкам, например:

<a href="#anchorLinkID" target="_self">Go to inpage section</a>

Angular по умолчанию используется браузер, и, поскольку он связан с привязкой, а не с другим базовым URL-адресом, браузер прокручивается в нужное место по желанию.

Я пошел с вариантом 3, потому что лучше всего полагаться на встроенные функции браузера здесь и экономит время и силы.

Следует отметить, что после успешного изменения прокрутки и хэша Angular выполняет и переписывает хэш в свой собственный стиль. Тем не менее, браузер уже завершил свой бизнес, и вам хорошо идти.

Ответ 2

Я не знаю, отвечает ли это на ваш вопрос, но да, вы можете использовать ссылки angularjs, например:

<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>

На веб-сайте AngularJS есть хороший пример:

http://docs.angularjs.org/api/ng.directive:ngHref

ОБНОВЛЕНИЕ: документация AngularJS была немного неясной, и она не обеспечила для нее хорошего решения. Сожалею!

Здесь вы можете найти лучшее решение: Как обрабатывать привязку привязки привязки в AngularJS

Ответ 3

Вы можете попытаться использовать anchorScroll.

Пример

Таким образом, контроллер будет:

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

И представление:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

... и не секрет для идентификатора привязки:

<div id="foo">
  This is #foo
</div>

Ответ 4

$anchorScroll действительно является ответом на это, но есть гораздо лучший способ использовать его в более поздних версиях Angular.

Теперь $anchorScroll принимает хеш в качестве необязательного аргумента, поэтому вам вообще не нужно менять $location.hash. (документация)

Это лучшее решение, потому что оно вообще не влияет на маршрут. Я не мог заставить работать какие-либо другие решения, потому что я использую ngRoute, и маршрут будет перезагружаться, как только я установлю $location.hash(id), прежде чем $anchorScroll сможет сделать свою магию.

Вот как его использовать... во-первых, в директиве или контроллере:

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

а затем в представлении:

<a href="" ng-click="scrollTo(id)">Text</a>

Кроме того, если вам нужно учесть фиксированный navbar (или другой пользовательский интерфейс), вы можете установить смещение для $anchorScroll как это (в функции запуска основного модуля):

  .run(function ($anchorScroll) {
      //this will make anchorScroll scroll to the div minus 50px
      $anchorScroll.yOffset = 50;
  });

Ответ 5

У меня была та же проблема, но это сработало для меня:

<a ng-href="javascript:void(0);#tagId"></a>

Ответ 6

Работает для меня:

 <a onclick='return false;' href="" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" ng-href="#profile#collapse{{$index}}"> blalba </a>

Ответ 7

Или вы могли бы просто написать:

ng-href="\#yourAnchorId"

Обратите внимание на обратную косую черту перед символом хеша

Ответ 8

Лучший выбор для меня - создать директиву для выполнения работы, потому что $location.hash() и $anchorScroll() захватить URL-адрес, создавая множество проблем для моей маршрутизации SPA.

MyModule.directive('myAnchor', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elem, attrs, ngModel) {
      return elem.bind('click', function() {
        //other stuff ...
        var el;
        el = document.getElementById(attrs['myAnchor']);
        return el.scrollIntoView();
      });      
    }
  };
});

Ответ 9

Если вы используете SharePoint и angular, выполните следующие действия:

<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a> 

где LinkTo и Title - столбцы SharePoint.

Ответ 10

Вы также можете перейти к идентификатору HTML из внутреннего контроллера

$location.hash('id_in_html');

Ответ 11

Вам нужно добавить только ссылку target = "_ self" на вашу ссылку

ех. <a href="#services" target="_self">Services</a>