Прокрутите до привязки после загрузки страницы в Angular

Мне нужно установить нг щелкните событие, так что, что он загружает новую страницу, а затем, после загрузки страницы, прокручивается на точку привязки на этой странице. Я пробовал каждое предлагаемое решение на этом сообщении SO, но я не могу заставить его работать правильно.

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

Вот мой код:

<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>

Это представляет собой кнопку внутри "карты профиля". Когда пользователь нажимает на карту, она переводит их на страницу профиля. Однако, когда они нажимают кнопку, нужно передать их в часть #jobs этой страницы профиля (отсюда $stopPropogation() перед goToResultJobs (r) в коде).

Вот как выглядит мой метод goToResultJobs.

$scope.goToResultJobs = function(result) {
    var profileUrl = result.slug;
    window.location = profileUrl;
};

Я попытался использовать $anchorScroll и просто hardcoding в привязке в profileUrl, но никто не работает. Я новичок в Angular, поэтому не знаю, что мне здесь не хватает.

ОБНОВЛЕНИЕ 1: попытка использования $timeout

Вот мой метод goToResultJobs в моем ResultsCtrl, который запускается, когда пользователь нажимает кнопку:

$scope.goToResultJobs = function(result) {
    var url = window.location + result.slug + '#jobs';
    location.replace(url);
};

Загружает путь /name#jobs, который вызывает ProfileCtrl ниже:

app.controller('ProfileCtrl', ['$scope', '$http', '$timeout', '$location', '$anchorScroll',
function($scope, $http, $timeout, $location, $anchorScroll) {
    if(window.location.hash) {
        $timeout(function() {
            console.log('TEST');
            // $location.hash('jobs');
            // $location.hash('jobs');
            $anchorScroll();
        }, 1000);
    };
}]);

Эта настройка работает, поскольку TEST отображается только на консоли при нажатии кнопки "Задания", но не тогда, когда пользователь просто нажимает на профиль. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что страница начинает загружаться, а путь в строке url изменяется на /name#jobs, но до завершения загрузки страницы jobs удаляется из URL-адреса. Поэтому, когда вызывается $anchorScroll(), в хеше нет метки привязки для прокрутки.

ОТВЕТЫ

Ответ 1

Итак, как указано, $anchorScroll должен произойти после того, как страница была отображена, в противном случае якорь не существует. Это может быть достигнуто с помощью $timeout().

$timeout(function() {
  $anchorScroll('myAnchor');
});

Вы можете видеть этот plunkr. Не забудьте просмотреть его в режиме всплытия (маленькая синяя кнопка в правом верхнем углу экрана вывода).

Ответ 2

Святая моля, это можно сделать, просто добавив autoscroll="true" к вашему шаблону:

<div autoscroll="true" data-ng-include='"/templates/partials/layout/text-column.html"'></div>

Документация

Ответ 3

Try:

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
      $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      $anchorScroll();
    };
}]);

'bottom' здесь - идентификатор вашего элемента html, к которому вы хотите перейти.

Документация здесь: https://docs.angularjs.org/api/ng/service/$anchorScroll

Ответ 4

Возможно, после загрузки страницы можно использовать собственный JavaScript Element.scrollIntoView()?

Ответ 5

мое решение

export function onAnchorClick(fragment){

  fragment.subscribe(f=>{
    const element = document.querySelector( "#" + f )
    if ( element ) {
      element.scrollIntoView({behavior: "smooth", block: "center", inline: "center"})
    }

  })
}