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

J'ai besoin de définir une ng-cliquez sur l'événement de sorte que le chargement d'une nouvelle page, et ensuite, une fois la page chargée, défile à un point d'ancrage sur la page. J'ai essayé toutes les solutions proposées sur cette SORTE de post mais je ne peux pas le faire fonctionner correctement.

La plupart de ces solutions center autour de défilement à un point d'ancrage sur une page qui est déjà chargé. J'ai besoin de la faire défiler à se produire après une nouvelle page est chargée.

Voici mon code:

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

Cela représente un bouton à l'intérieur d'un profil de carte'. Lorsque l'utilisateur clique sur la carte, il mène à une page de profil. Cependant, lorsqu'ils cliquent sur le bouton, il doit prendre pour le nombre d'emplois portion de cette page de profil (d'où le $stopPropogation() avant le goToResultJobs(r) dans le code).

Voici ce que ma goToResultJobs méthode ressemble.

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

J'ai essayé d'utiliser $anchorScroll et juste coder en dur dans l'ancre dans la profileUrlmais aucun des deux ne fonctionne. Je suis assez nouveau dans Angulaire, donc je ne sais pas ce que je suis absent ici.

Mise à JOUR 1: Essayez d'utiliser $timeout

Voici mon goToResultJobs méthode au sein de mon ResultsCtrl qui est déclenché lorsque l'utilisateur clique sur le bouton:

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

Qui charge le /name#jobs chemin, qui appelle à la 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 installation semble fonctionner, comme TEST ne s'affiche dans la console lors de l'emploi de bouton est cliqué, mais pas lorsque l'utilisateur clique tout simplement sur le profil. Le problème, je vais maintenant confrontés est que la page commence à charger, et le chemin d'accès dans la barre d'url changements à /name#jobsmais avant le chargement de la page terminé, jobs est dépouillé à partir de l'url. Par conséquent, lorsque $anchorScroll() est appelé, il n'y a pas de balise d'ancrage dans la table de hachage pour faire défiler jusqu'à.

source d'informationauteur ACIDSTEALTH

  1. 15

    Donc, comme l'a souligné, la $anchorScroll doit se produire après que la page a été rendu, sinon le point d'ancrage n'existe pas. Ceci peut être réalisé à l'aide de $timeout().

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

    Vous pouvez voir cette plunkr. Assurez-vous de l'afficher dans des fenêtres pop-mode (le petit bouton bleu dans le coin supérieur droit de l'écran de sortie).

  2. 2

    Saint moly, cela peut être réalisé simplement par ajout de autoscroll="true" à votre modèle:

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

    La Documentation

  3. 0

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

    'bas' ici est l'id de votre élément html à laquelle vous souhaitez faire défiler jusqu'à.

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

  4. -1

    Peut-être que vous pouvez utiliser Javascript natif de De l'élément.scrollIntoView() après que la page a été chargée?