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

  • AceHoodVEVO

    AceHoodVEVO

    12 Mayıs 2009
  • booba1234

    booba1234

    22 Temmuz 2006
  • SRT Photoshop Tutorials

    SRT Photosho

    19 Aralık 2012