SORU
5 ŞUBAT 2013, Salı


Nasıl çapa karma AngularJS bağlama işlemek için

Herhangi biriniz güzelce çapa karma AngularJS bağlama yapmayı biliyor musun?

SSS-sayfa basit için aşağıdaki biçimlendirme var

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

Yukarıdakilerden herhangi biri tıklandığında bağlantılar tamamen farklı bir sayfa (benim durumumda, yolları bağlantıları eşleşen yok gibi 404-sayfa.) karşılar ve yönlendirir beni AngularJS

İlk aklıma gelen bir yol "" ve ilgili denetleyici $routeParams.kontrol edin:bölüm/SSS eşleştirme yaratmaktı eşleşen bir öğe sonra bölüm ve bir WordPress kullanmak için aşağı kaydırmak için kullanın. Ama sonra AngularJS beni yine palavra ve sadece sayfayı zaten üstüne kayar.

Yani, burada hiç kimse bir şey geçmişte benzer ve bunun için iyi bir çözüm bilen?

Edit: html5Mode Geçiş sorunları çözmek gerekir ama kabul edilen bir çözüm değil korkarım ki IE8 neyse destek için: / var biraz

CEVAP
5 ŞUBAT 2013, Salı


$anchorScroll() arıyoruz.

Here's the (crappy) documentation.

And here's the source.

Temelde sadece enjekte ve denetleyici içinde arayın, ve kimliği $location.hash() bulunan herhangi bir öğe için kaydırma olacaktır

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>

Here is a plunker to demonstrate

EDİT: yönlendirme ile bu ..

Senin açısal her zamanki gibi yönlendirme, sadece aşağıdaki kodu ekleyin ayarlayın.

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

ve Bağlantı bu gibi görünecektir:

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

Burada Plunker demonstrating scrolling with routing and $anchorScroll

Ve hatta basittir:

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

ve Bağlantı bu gibi görünecektir:

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Ampisound

    Ampisound

    12 Kasım 2006
  • jat4011

    jat4011

    16 EKİM 2010
  • Jorrit Jongma

    Jorrit Jongm

    17 Ocak 2008