web-dev-qa-db-fra.com

Faites défiler jusqu'à l'ancre après le chargement de la page dans Angular

J'ai besoin de définir un événement ng-click pour qu'il charge une nouvelle page, puis, une fois la page chargée, défile jusqu'à un point d'ancrage sur la page. J'ai essayé toutes les solutions proposées sur this SO post mais je ne peux pas le faire fonctionner correctement.

La plupart de ces solutions se concentrent sur le défilement vers une ancre sur une page déjà chargée. J'ai besoin que le défilement se produise après le chargement d'une nouvelle page.

Voici mon code d'affichage:

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

Cela représente un bouton à l'intérieur d'une "carte de profil". Lorsque l'utilisateur clique sur la carte, il le redirige vers une page de profil. Cependant, lorsqu'ils cliquent sur le bouton, il doit les amener à la partie #jobs de cette page de profil (d'où la $ stopPropogation () avant le goToResultJobs (r) dans le code).

Voici à quoi ressemble ma méthode goToResultJobs.

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

J'ai essayé d'utiliser $anchorScroll Et juste de coder en dur dans l'ancre dans le profileUrl, mais aucun ne fonctionne. Je suis assez nouveau sur Angular, donc je ne sais pas ce qui me manque ici.

MISE À JOUR 1: Essayer d'utiliser $ timeout

Voici ma méthode goToResultJobs dans mon ResultsCtrl qui est déclenchée lorsque l'utilisateur clique sur le bouton:

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

Cela charge le chemin /name#jobs, Qui appelle le ProfileCtrl ci-dessous:

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

Cette configuration semble fonctionner, car TEST n'apparaît dans la console que lorsque le bouton Jobs est cliqué, mais pas lorsque l'utilisateur clique simplement sur le profil. Le problème auquel je suis maintenant confronté est que la page commence à se charger et que le chemin dans la barre d'URL devient /name#jobs, Mais avant que le chargement de la page ne soit terminé, jobs est supprimé de l'URL. Par conséquent, lorsque $anchorScroll() est appelée, il n'y a pas de balise d'ancrage dans le hachage pour faire défiler.

angularjsanchor-scroll
19
Daniel Bonnell

Ainsi, comme indiqué, le $anchorScroll Doit se produire après le rendu de la page, sinon l'ancre n'existe pas. Ceci peut être réalisé en utilisant $timeout().

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

Vous pouvez voir ce plunkr . Assurez-vous de le visualiser en mode pop-out (le petit bouton bleu dans le coin supérieur droit de l'écran de sortie).

16
Tony

Holy moly, cela peut être accompli en ajoutant simplement autoscroll="true" à votre modèle:

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

Documentation

4
duhaime

Essayer:

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' est l'id de votre élément html vers lequel vous souhaitez faire défiler.

Documentation ici: https://docs.angularjs.org/api/ng/service/$anchorScroll

0
bamboo_inside