Выделите якорь после загрузки страницы в угловом

Question

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

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

Вот мой взгляд код:

<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 и просто жестко прописывать в якорь в profileUrl, но ни один работает. Я довольно новичок в Angular, поэтому не знаю, чего мне здесь не хватает.

UPDATE 1: Попытка использовать $ тайм-аут

Вот мой 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(), в хеше нет метки привязки для прокрутки.

Answer 1

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

Answer 2

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(); 
    }; 
}]); 

«снизу» здесь идентификатор вашего HTML элемента, к которому вы хотите, чтобы перейти к.

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

Answer 3

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

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

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

Answer 4

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

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

Documentation