Come gestire il collegamento hash di ancoraggio in AngularJS

Qualcuno di voi sa come gestire bene il collegamento hash di ancoraggio in AngularJS ?

Ho il seguente markup per una semplice pagina 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>

Quando si fa clic su uno dei collegamenti sopra indicati, AngularJS intercetta e mi indirizza a una pagina completamente diversa (nel mio caso, una pagina di 404 in quanto non esistono percorsi corrispondenti ai collegamenti.)

Il mio primo pensiero è stato quello di creare un percorso corrispondente " / faq /: capitolo " e nel controller corrispondente controllare $routeParams.chapterdopo un elemento corrispondente e quindi utilizzare jQuery per scorrere verso il basso.

Ma poi AngularJS mi caga di nuovo e scorre comunque fino all'inizio della pagina.

Quindi, qualcuno qui ha fatto qualcosa di simile in passato e conosce una buona soluzione?

Modifica: passare a html5Mode dovrebbe risolvere i miei problemi, ma in qualche modo dobbiamo supportare IE8 + quindi temo che non sia una soluzione accettata: /

Stai cercando $anchorScroll().

Ecco la documentazione (scadente).

Ed ecco la fonte.

Fondamentalmente lo devi solo iniettare e chiamarlo nel tuo controller, e ti farà scorrere fino a qualsiasi elemento con l'id trovato in $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>

Ecco un plunker per dimostrare

EDIT: per usarlo con il routing

Configura il routing angolare come al solito, quindi aggiungi il seguente codice.

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

e il tuo link sarebbe simile al seguente:

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

Ecco un Plunker che dimostra lo scorrimento con routing e $ anchorScroll

E ancora più semplice:

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

e il tuo link sarebbe simile al seguente:

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

Nel mio caso, ho notato che la logica di routing si avviava se avessi modificato il $location.hash(). Il seguente trucco ha funzionato ..

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

Non è necessario modificare alcun routing o qualsiasi altra cosa è sufficiente utilizzare target="_self"durante la creazione dei collegamenti

Esempio:

<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>

E usa l' idattributo nei tuoi elementi html in questo modo:

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

Non è necessario utilizzare ## come indicato / menzionato nei commenti ;-)

<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>

Se conosci sempre il percorso, puoi semplicemente aggiungere l'ancora in questo modo:

href="#/route#anchorID

dove si routetrova il percorso angolare corrente e anchorIDcorrisponde a un punto <a id="anchorID">della pagina

$anchorScroll funziona per questo, ma c'è un modo molto migliore per usarlo nelle versioni più recenti di Angular.

Ora $anchorScrollaccetta l'hash come argomento facoltativo, quindi non devi cambiare $location.hashnulla. ( documentazione )

Questa è la soluzione migliore perché non influisce affatto sul percorso. Non sono riuscito a far funzionare nessuna delle altre soluzioni perché sto usando ngRoute e il percorso si ricaricherebbe non appena ho impostato $location.hash(id), prima che $anchorScrollpotesse fare la sua magia.

Ecco come usarlo ... prima, nella direttiva o nel controller:

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

e quindi nella vista:

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

Inoltre, se devi tenere conto di una barra di navigazione fissa (o altra interfaccia utente), puoi impostare l'offset per $ anchorScroll in questo modo (nella funzione di esecuzione del modulo principale):

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

Questa è stata la mia soluzione usando una direttiva che sembra più angolare perché abbiamo a che fare con il DOM:

Plnkr qui

github

CODICE

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>

Ho usato il servizio $ anchorScroll. Per contrastare l'aggiornamento della pagina associato alla modifica dell'hash, sono andato avanti e ho annullato l'evento locationChangeStart. Questo ha funzionato per me perché avevo una pagina di aiuto collegata a un interruttore ng e gli aggiornamenti avrebbero interrotto in modo essenziale l'app.

Prova a impostare un prefisso hash per percorsi angolari $locationProvider.hashPrefix('!')

Esempio completo:

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

L'ho aggirato nella logica del percorso per la mia app.

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

Questo è un vecchio post, ma ho passato molto tempo a cercare varie soluzioni, quindi volevo condividerne uno più semplice. L'aggiunta target="_self"al <a>tag l'ha risolto per me. Il collegamento funziona e mi porta nella posizione corretta sulla pagina.

Tuttavia, Angular inietta ancora qualche stranezza con il # nell'URL, quindi potresti avere problemi usando il pulsante Indietro per la navigazione e simili dopo aver usato questo metodo.

Questo potrebbe essere un nuovo attributo per ngView, ma sono stato in grado di farlo funzionare con i collegamenti hash di ancoraggio angular-routeusando l' ngView autoscrollattributo e "double hash".

ngView (vedi autoscroll)

(Il seguente codice è stato utilizzato con cinghia angolare)

<!-- 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>

Potrei farlo in questo modo:

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

Ecco una sorta di soluzione alternativa sporca creando una direttiva personalizzata che scorrerà all'elemento specificato (con "faq" hardcoded)

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>

Se non ti piace usare ng-clickecco una soluzione alternativa. Utilizza a filterper generare l'URL corretto in base allo stato corrente. Il mio esempio usa ui.router .

Il vantaggio è che l'utente vedrà dove passa il collegamento al passaggio del mouse.

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

Il filtro:

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

La mia soluzione con ng-route era questa semplice direttiva:

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

L'html è simile a:

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

Potresti provare a usare anchorScroll .

Esempio

Quindi il controller sarebbe:

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

E la vista:

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

... e nessun segreto per l'ID di ancoraggio:

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

Stavo cercando di far scorrere la mia app Angular fino al caricamento di un tassello di ancoraggio e ho incontrato le regole di riscrittura dell'URL di $ routeProvider.

Dopo una lunga sperimentazione mi sono deciso su questo:

1. registra un gestore di eventi document.onload dalla sezione .run () del modulo dell'app Angular.
2. nel gestore scopri cosa avrebbe dovuto essere l'originale tag di ancoraggio facendo alcune operazioni sulle stringhe.
3. sovrascrivi location.hash con il tag di ancoraggio rimosso (che fa sì che $ routeProvider lo sovrascriva immediatamente con la sua regola "# /". Ma va bene, perché Angular è ora sincronizzato con ciò che sta accadendo nell'URL 4) chiama $ 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();
			}
		}	 
 });

Non sono sicuro al 100% se funziona sempre, ma nella mia applicazione questo mi dà il comportamento previsto.

Diciamo che sei sulla pagina INFORMAZIONI E che hai il seguente percorso:

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

Ora, nel tuo 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>

In conclusione

Includere il nome della pagina prima dell'ancora ha fatto il trucco per me. Fammi sapere dei tuoi pensieri.

Svantaggio

Ciò ridistribuirà la pagina e quindi scorrerà fino all'ancoraggio.

AGGIORNARE

Un modo migliore è aggiungere quanto segue:

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

Ottieni facilmente la tua funzione di scorrimento. Supporta anche lo scorrimento animato / uniforme come funzionalità aggiuntiva. Dettagli per la libreria Angular Scroll :

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

Bower :bower install --save angular-scroll

npm :npm install --save angular-scroll

Versione ridotta - solo 9kb

Scorrimento regolare (scorrimento animato) - sì

Scroll Spy - sì

Documentazione - eccellente

Demo - http://oblador.github.io/angular-scroll/

Spero che questo ti aiuti.

Sulla base di @Stoyan ho trovato la seguente soluzione:

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

Al cambio del percorso, scorrerà fino all'inizio della pagina.

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

inserisci questo codice sul tuo controller.

Nella mia mente @slugslog ce l'aveva, ma avrei cambiato una cosa. Vorrei invece sostituire, quindi non è necessario ripristinarlo.

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

Ricerca documenti per "Sostituisci metodo"

Nessuna delle soluzioni sopra funziona per me, ma ho appena provato questo e ha funzionato,

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

Quindi mi sono reso conto che ho bisogno di avvisare la pagina per iniziare con la pagina dell'indice e quindi utilizzare l'ancoraggio tradizionale.

A volte nella navigazione dell'hash dell'applicazione angularjs non funziona e le librerie javery jquery di bootstrap fanno ampio uso di questo tipo di navigazione, per farlo funzionare aggiungere target="_self"al tag anchor. per esempio<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

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

[reloadOnSearch = true] - {boolean =} - ricarica il percorso quando cambiano solo $ location.search () o $ location.hash ().

Impostando questo su falso ha fatto il trucco senza tutto quanto sopra per me.

Sto usando AngularJS 1.3.15 e sembra che non debba fare nulla di speciale.

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

Quindi, il seguente funziona per me nel mio HTML:

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

Non ho dovuto apportare alcuna modifica al mio controller o JavaScript.