Comment gérer la liaison de hachage d'ancrage dans AngularJS

Est-ce que l'un d'entre vous sait comment bien gérer la liaison de hachage d'ancrage dans AngularJS ?

J'ai le balisage suivant pour une simple page FAQ

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

Lorsque vous cliquez sur l'un des liens ci-dessus, AngularJS intercepte et m'achemine vers une page complètement différente (dans mon cas, une page de 404 car il n'y a pas d'itinéraires correspondant aux liens.)

Ma première pensée a été de créer un itinéraire correspondant " / faq /: chapitre " et dans le contrôleur correspondant, vérifier $routeParams.chapteraprès un élément correspondant, puis utiliser jQuery pour y faire défiler.

Mais AngularJS me chie encore une fois et fait quand même défiler vers le haut de la page.

Donc, quelqu'un ici a fait quelque chose de similaire dans le passé et connaît une bonne solution?

Edit: Passer à html5Mode devrait résoudre mes problèmes, mais nous devons en quelque sorte prendre en charge IE8 +, donc je crains que ce ne soit pas une solution acceptée: /

Vous cherchez $anchorScroll().

Voici la documentation (merde).

Et voici la source.

Fondamentalement, il vous suffit de l'injecter et de l'appeler dans votre contrôleur, et il vous fera défiler jusqu'à n'importe quel élément avec l'ID trouvé dans $location.hash()

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

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

Voici un plongeur pour démontrer

EDIT: pour l'utiliser avec le routage

Configurez votre routage angulaire comme d'habitude, puis ajoutez simplement le code suivant.

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

et votre lien ressemblerait à ceci:

<a href="#/test?scrollTo=foo">Test/Foo</a>

Voici un Plunker démontrant le défilement avec le routage et $ anchorScroll

Et encore plus simple:

app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

et votre lien ressemblerait à ceci:

<a href="#/test#foo">Test/Foo</a>

Dans mon cas, j'ai remarqué que la logique de routage se déclenchait si je modifiais le $location.hash(). L'astuce suivante a fonctionné ..

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

Il n'est pas nécessaire de modifier le routage ou tout autre élément à utiliser target="_self"lors de la création des liens

Exemple:

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

Et utilisez l' idattribut dans vos éléments html comme ceci:

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Il n'est pas nécessaire d'utiliser ## comme indiqué / mentionné dans les commentaires ;-)

<a href="##faq-1">Question 1</a>
<a href="##faq-2">Question 2</a>
<a href="##faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Si vous connaissez toujours l'itinéraire, vous pouvez simplement ajouter l'ancre comme ceci:

href="#/route#anchorID

où routeest l'itinéraire angulaire actuel et anchorIDcorrespond à <a id="anchorID">quelque part sur la page

$anchorScroll fonctionne pour cela, mais il existe une bien meilleure façon de l'utiliser dans les versions plus récentes d'Angular.

Maintenant, $anchorScrollaccepte le hachage comme argument facultatif, vous n'avez donc pas à changer $location.hashdu tout. ( documentation )

C'est la meilleure solution car elle n'affecte pas du tout l'itinéraire. Je n'ai pu faire fonctionner aucune des autres solutions car j'utilise ngRoute et la route se rechargerait dès que j'aurais défini $location.hash(id), avant de $anchorScrollpouvoir faire sa magie.

Voici comment l'utiliser ... d'abord, dans la directive ou le contrôleur:

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

puis dans la vue:

<a href="" ng-click="scrollTo(id)">Text</a>

De plus, si vous devez tenir compte d'une barre de navigation fixe (ou d'une autre interface utilisateur), vous pouvez définir le décalage pour $ anchorScroll comme ceci (dans la fonction d'exécution du module principal):

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

C'était ma solution en utilisant une directive qui semble plus angulaire-y parce que nous avons affaire au DOM:

Plnkr ici

github

CODE

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

HTML

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

J'ai utilisé le service $ anchorScroll. Pour contrer l'actualisation de la page qui accompagne le changement de hachage, j'ai continué et annulé l'événement locationChangeStart. Cela a fonctionné pour moi car j'avais une page d'aide connectée à un ng-switch et les rafraîchissements briseraient essentiellement l'application.

Essayez de définir un préfixe de hachage pour les itinéraires angulaires $locationProvider.hashPrefix('!')

Exemple complet:

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

J'ai contourné cela dans la logique de l'itinéraire pour mon application.

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}

Ceci est un ancien poste, mais j'ai passé beaucoup de temps à rechercher diverses solutions, donc je voulais en partager une plus simple. Le simple ajout target="_self"à la <a>balise l'a corrigé pour moi. Le lien fonctionne et m'amène au bon endroit sur la page.

Cependant, Angular injecte toujours un peu de bizarrerie avec le # dans l'URL, vous pouvez donc rencontrer des problèmes en utilisant le bouton de retour pour la navigation et autres après avoir utilisé cette méthode.

Il s'agit peut-être d'un nouvel attribut pour ngView, mais j'ai pu obtenir des liens de hachage d'ancrage avec lesquels angular-routeutiliser l' ngView autoscrollattribut et les «doubles hachages».

ngView (voir défilement automatique)

(Le code suivant a été utilisé avec une sangle angulaire)

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

Je pourrais faire ça comme ça:

<li>
<a href="#/#about">About</a>
</li>

Voici une sorte de solution de contournement en créant une directive personnalisée qui défilera jusqu'à l'élément spécifié (avec une "FAQ" codée en dur)

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview

<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>

Si vous n'aimez pas utiliser, ng-clickvoici une autre solution. Il utilise un filterpour générer l'URL correcte en fonction de l'état actuel. Mon exemple utilise ui.router .

L'avantage est que l'utilisateur verra où le lien passe en survol.

<a href="{{ 'my-element-id' | anchor }}">My element</a>

Le filtre:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

Ma solution avec ng-route était cette simple directive:

   app.directive('scrollto',
       function ($anchorScroll,$location) {
            return {
                link: function (scope, element, attrs) {
                    element.click(function (e) {
                        e.preventDefault();
                        $location.hash(attrs["scrollto"]);
                        $anchorScroll();
                    });
                }
            };
    })

Le html ressemble à:

<a href="" scrollTo="yourid">link</a>

Vous pouvez essayer d'utiliser anchorScroll .

Exemple

Le contrôleur serait donc:

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

Et la vue:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

... et pas de secret pour l'identifiant de l'ancre:

<div id="foo">
  This is #foo
</div>

J'essayais de faire défiler mon application angulaire jusqu'à un chargement d'opon d'ancrage et j'ai rencontré les règles de réécriture d'URL de $ routeProvider.

Après une longue expérimentation, je me suis installé sur ceci:

1. enregistrer un gestionnaire d'événements document.onload à partir de la section .run () du module d'application Angular.
2. dans le gestionnaire, découvrez ce que la balise d'ancrage d'origine était censée être en effectuant certaines opérations de chaîne.
3. remplacez location.hash avec la balise d'ancrage supprimée (ce qui oblige $ routeProvider à la remplacer immédiatement avec sa règle "# /". Mais c'est très bien, car Angular est maintenant synchronisé avec ce qui se passe dans l'URL 4). $ anchorScroll ().

angular.module("bla",[]).}])
.run(function($location, $anchorScroll){
         $(document).ready(function() {
	 if(location.hash && location.hash.length>=1)    		{
			var path = location.hash;
			var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
			if ($("#" + potentialAnchor).length > 0) {   // make sure this hashtag exists in the doc.                          
			    location.hash = potentialAnchor;
			    $anchorScroll();
			}
		}	 
 });

Je ne suis pas sûr à 100% si cela fonctionne tout le temps, mais dans mon application, cela me donne le comportement attendu.

Disons que vous êtes sur la page À PROPOS et que vous avez l'itinéraire suivant:

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

Maintenant, en vous HTML

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

En conclusion

L'inclusion du nom de la page avant l'ancre a fait l'affaire pour moi. Faites-moi part de vos pensées.

Inconvénient

Cela restituera la page, puis défilera jusqu'à l'ancre.

METTRE À JOUR

Une meilleure façon consiste à ajouter ce qui suit:

<a href="#tab1" onclick="return false;">First Part</a>

Obtenez facilement votre fonction de défilement. Il prend également en charge le défilement animé / lisse en tant que fonctionnalité supplémentaire. Détails pour la bibliothèque de défilement angulaire :

Github - https://github.com/oblador/angular-scroll

Bower :bower install --save angular-scroll

npm :npm install --save angular-scroll

Version minfied - seulement 9kb

Défilement fluide (défilement animé) - oui

Scroll Spy - oui

Documentation - excellente

Démo - http://oblador.github.io/angular-scroll/

J'espère que cela t'aides.

Sur la base de @Stoyan, j'ai trouvé la solution suivante:

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

Lors du changement d'itinéraire, il défile en haut de la page.

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

mettez ce code sur votre manette.

Dans mon esprit, @slugslog l'avait, mais je changerais une chose. J'utiliserais plutôt replace pour ne pas avoir à le remettre en place.

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

Recherche de documents pour la «méthode de remplacement»

Aucune des solutions ci-dessus ne fonctionne pour moi, mais je viens de l'essayer, et cela a fonctionné,

<a href="#/#faq-1">Question 1</a>

J'ai donc réalisé que je devais notifier la page pour commencer par la page d'index, puis utiliser l'ancre traditionnelle.

Parfois, dans angularjs, la navigation par hachage ne fonctionne pas et les bibliothèques javery bootstrap jquery utilisent largement ce type de navigation, pour le faire fonctionner, ajouter target="_self"à la balise d'ancrage. par exemple<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

Voir https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ routeProvider

[reloadOnSearch = true] - {boolean =} - recharger la route lorsque seulement $ location.search () ou $ location.hash () change.

Définir ce paramètre sur faux a fait l'affaire sans tout ce qui précède pour moi.

J'utilise AngularJS 1.3.15 et on dirait que je n'ai rien à faire de spécial.

https://code.angularjs.org/1.3.15/docs/api/ng/provider/ $ anchorScrollProvider

Donc, ce qui suit fonctionne pour moi dans mon html:

<ul>
  <li ng-repeat="page in pages"><a ng-href="#{{'id-'+id}}">{{id}}</a>
  </li>
</ul>
<div ng-attr-id="{{'id-'+id}}" </div>

Je n'ai pas du tout dû apporter de modifications à mon contrôleur ou à JavaScript.