Cara menangani tautan hash jangkar di AngularJS

Apakah ada di antara Anda yang tahu cara menangani tautan hash dengan baik di AngularJS ?

Saya memiliki markup berikut untuk halaman FAQ sederhana

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

Ketika mengklik salah satu tautan di atas AngularJS memotong dan merutekan saya ke halaman yang sama sekali berbeda (dalam kasus saya, 404 halaman karena tidak ada rute yang cocok dengan tautan tersebut.)

Pikiran pertama saya adalah membuat rute yang cocok dengan " / faq /: bab " dan di controller yang sesuai memeriksa $routeParams.chaptersetelah elemen yang cocok dan kemudian menggunakan jQuery untuk menggulir ke bawah ke sana.

Tapi kemudian AngularJS marah pada saya lagi dan hanya menggulir ke bagian atas halaman.

Jadi, ada orang di sini yang pernah melakukan hal serupa di masa lalu dan tahu solusi yang baik untuk itu?

Sunting: Beralih ke html5Mode harus menyelesaikan masalah saya, tetapi kami agaknya harus mendukung IE8 + jadi saya khawatir ini bukan solusi yang diterima: /

Anda sedang mencari $anchorScroll().

Inilah dokumentasi (jelek).

Dan inilah sumbernya.

Pada dasarnya Anda hanya menyuntikkannya dan memanggilnya di controller Anda, dan itu akan menggulir Anda ke elemen apa pun dengan id ditemukan di $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>

Berikut ini adalah salah satu pendongkrak untuk diperagakan

EDIT: untuk menggunakan ini dengan routing

Atur perutean sudut Anda seperti biasa, lalu tambahkan saja kode berikut.

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

dan tautan Anda akan terlihat seperti ini:

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

Berikut ini adalah seorang Plunker yang menunjukkan pengguliran dengan perutean dan $ anchorScroll

Dan bahkan lebih sederhana:

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

dan tautan Anda akan terlihat seperti ini:

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

Dalam kasus saya, saya perhatikan bahwa logika routing menendang jika saya memodifikasi $location.hash(). Trik berikut berhasil ..

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

Tidak perlu mengubah perutean apa pun atau apa pun hanya perlu digunakan target="_self"saat membuat tautan

Contoh:

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

Dan gunakan idatribut di html Anda elemen seperti ini:

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

Tidak perlu menggunakan ## seperti yang ditunjukkan / disebutkan dalam komentar ;-)

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

Jika Anda selalu tahu rute, Anda bisa menambahkan jangkar seperti ini:

href="#/route#anchorID

di mana routerute sudut saat ini dan anchorIDcocok dengan suatu <a id="anchorID">tempat di halaman

$anchorScroll berfungsi untuk ini, tetapi ada cara yang lebih baik untuk menggunakannya di versi Angular yang lebih baru.

Sekarang, $anchorScrollterima hash sebagai argumen opsional, jadi Anda tidak perlu mengubah $location.hashsama sekali. ( dokumentasi )

Ini adalah solusi terbaik karena tidak mempengaruhi rute sama sekali. Saya tidak bisa mendapatkan solusi lain untuk bekerja karena saya menggunakan ngRoute dan rute akan dimuat kembali begitu saya atur $location.hash(id), sebelum $anchorScrollbisa melakukan keajaibannya.

Berikut adalah cara menggunakannya ... pertama, dalam arahan atau pengontrol:

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

dan kemudian di tampilan:

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

Selain itu, jika Anda perlu memperhitungkan navbar tetap (atau UI lainnya), Anda dapat mengatur offset untuk $ anchorScroll seperti ini (dalam fungsi menjalankan modul utama):

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

Ini adalah solusi saya menggunakan arahan yang tampaknya lebih Angular-y karena kita berurusan dengan DOM:

Plnkr di sini

github

KODE

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>

Saya menggunakan layanan $ anchorScroll. Untuk mengatasi penyegaran-halaman yang sejalan dengan perubahan hash, saya melanjutkan dan membatalkan event locationChangeStart. Ini bekerja untuk saya karena saya memiliki halaman bantuan yang terhubung ke ng-switch dan refresh akan pada dasarnya merusak aplikasi.

Cobalah untuk mengatur awalan hash untuk rute sudut $locationProvider.hashPrefix('!')

Contoh lengkap:

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

Saya menyiasati ini dalam logika rute untuk aplikasi saya.

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

Ini adalah pos lama, tetapi saya menghabiskan waktu lama meneliti berbagai solusi, jadi saya ingin berbagi satu lagi yang sederhana. Hanya menambahkan target="_self"pada <a>tag, memperbaikinya untuk saya. Tautan berfungsi dan membawa saya ke lokasi yang tepat di halaman.

Namun, Angular masih menyuntikkan keanehan dengan # di URL sehingga Anda dapat mengalami masalah menggunakan tombol kembali untuk navigasi dan semacamnya setelah menggunakan metode ini.

Ini mungkin atribut baru untuk ngView, tapi saya sudah bisa mendapatkannya tautan hash jangkar untuk bekerja dengan angular-routemenggunakan ngView autoscrollatribut dan 'hash ganda'.

ngView (lihat autoscroll)

(Kode berikut digunakan dengan angular-strap)

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

Saya bisa melakukan ini seperti ini:

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

Berikut adalah jenis penyelesaian kotor dengan membuat arahan khusus yang akan bergulir ke elemen tertentu (dengan "faq" hardcod)

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>

Jika Anda tidak suka menggunakan di ng-clicksini solusi alternatif. Ini menggunakan filteruntuk menghasilkan url yang benar berdasarkan pada kondisi saat ini. Contoh saya menggunakan ui.router .

Manfaatnya adalah bahwa pengguna akan melihat di mana tautan berjalan melayang.

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

Filter:

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

Solusi saya dengan ng-route adalah arahan sederhana ini:

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

HTML terlihat seperti:

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

Anda dapat mencoba menggunakan anchorScroll .

Contoh

Jadi pengontrolnya adalah:

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

Dan tampilan:

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

... dan bukan rahasia untuk jangkar id:

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

Saya mencoba membuat aplikasi Angular saya menggulir ke anchor opon loading dan berlari ke aturan penulisan ulang URL dari $ routeProvider.

Setelah lama bereksperimen, saya menyelesaikan ini:

1. mendaftarkan document.onload event handler dari bagian .run () pada modul aplikasi Angular.
2. dalam handler mencari tahu apa yang seharusnya memiliki tag anchor seharusnya dengan melakukan beberapa operasi string.
3. timpa location.hash dengan tag anchor stripped down (yang menyebabkan $ routeProvider untuk segera menimpanya kembali dengan aturan "# /". Tapi itu tidak masalah, karena Angular sekarang sinkron dengan apa yang terjadi di URL 4) panggilan $ 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();
			}
		}	 
 });

Saya tidak 100% yakin apakah ini berfungsi sepanjang waktu, tetapi dalam aplikasi saya ini memberi saya perilaku yang diharapkan.

Katakanlah Anda berada di halaman TENTANG dan Anda memiliki rute berikut:

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

Sekarang, di HTML Anda

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

Kesimpulannya

Termasuk nama halaman sebelum jangkar melakukan trik untuk saya. Beri tahu saya tentang pemikiran Anda.

Kekurangannya

Ini akan merender ulang halaman dan kemudian gulir ke jangkar.

MEMPERBARUI

Cara yang lebih baik adalah menambahkan yang berikut ini:

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

Dapatkan fitur gulir Anda dengan mudah. Ini juga mendukung Penggulungan Animasi / Lancar sebagai fitur tambahan. Detail untuk pustaka Scroll Sudut :

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

Bower :bower install --save angular-scroll

npm :npm install --save angular-scroll

Versi kecil - hanya 9kb

Scrolling Halus (scrolling animasi) - ya

Gulir Spy - ya

Dokumentasi - luar biasa

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

Semoga ini membantu.

Berdasarkan @Stoyan saya datang dengan solusi berikut:

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

Pada Rute perubahan itu akan gulir ke bagian atas halaman.

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

letakkan kode ini di pengontrol Anda.

Dalam pikiran saya @slugslog memilikinya, tetapi saya akan mengubah satu hal. Saya akan menggunakan ganti sehingga Anda tidak harus mengaturnya kembali.

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

Pencarian Dokumen untuk "Ganti metode"

Tidak ada solusi di atas yang berfungsi untuk saya, tetapi saya baru saja mencoba ini, dan itu berhasil,

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

Jadi saya menyadari bahwa saya perlu memberi tahu halaman untuk memulai dengan halaman indeks dan kemudian menggunakan jangkar tradisional.

Kadang-kadang dalam aplikasi hash navigasi angularjs tidak bekerja dan bootstrap jquery perpustakaan javascript memanfaatkan ekstensif jenis navigasi ini, untuk membuatnya berfungsi menambah target="_self"tag anchor. misalnya<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

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

[reloadOnSearch = true] - {boolean =} - memuat ulang rute saat hanya $ location.search () atau $ location.hash () berubah.

Menetapkan ini ke false melakukan trik tanpa semua hal di atas untuk saya.

Saya menggunakan AngularJS 1.3.15 dan sepertinya saya tidak perlu melakukan sesuatu yang istimewa.

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

Jadi, berikut ini berfungsi untuk saya di html saya:

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

Saya tidak harus melakukan perubahan apa pun pada controller atau JavaScript saya sama sekali.