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

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

Вариант 1: родной угловой

Угловой предоставляет услугу $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: Угловое переопределение / Родной браузер

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

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

Пример: link

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

 Go to inpage section 

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

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

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

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

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

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

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

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

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

пример

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

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

И мнение:

 Scroll to #foo 

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

 
 This is #foo  

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

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

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

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

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

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

 Text 

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

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

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

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

   blalba  

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

ех. Services

Или вы просто можете написать:

ng-href="\#yourAnchorId"

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

Если вы используете SharePoint и угловые, сделайте это, как показано ниже:

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

Лучший выбор для меня – создать директиву для выполнения работы, потому что $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(); }); } }; }); 

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

 $location.hash('id_in_html');