AngularJS'de çapa karma bağlantısını işleme

AngularJS çapa karma bağlantı güzel nasıl idare biliyor musunuz ?

Basit bir SSS sayfası için aşağıdaki biçimlendirmeye sahibim

<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ıdaki bağlantılardan herhangi birine tıkladığınızda AngularJS araya girer ve beni tamamen farklı bir sayfaya yönlendirir (benim durumumda, bağlantılarla eşleşen rota olmadığı için 404 sayfalık bir sayfa).

İlk düşüncem " / faq /: bölüm " ile eşleşen bir rota oluşturmak ve $routeParams.chaptereşleşen bir elemandan sonra eşleşen bir denetleyiciyi kontrol etmek ve ardından aşağıya kaydırmak için jQuery kullanmaktı.

Ama sonra AngularJS bana tekrar bakıyor ve yine de sayfanın üst kısmına kaydırıyor.

Öyleyse, burada kimse geçmişte benzer bir şey yaptı ve buna iyi bir çözüm biliyor mu?

Edit: html5Mode geçiş benim sorunları çözmek gerekir ama biz zaten kabul bir çözüm değil korkuyorum IE8 + yine de desteklemek zorunda: /

Arıyorsunuz $anchorScroll().

İşte (boktan) belgeler.

Ve işte kaynak.

Temel olarak sadece enjekte edip kumandanıza çağırıyorsunuz ve sizi kimliğinde bulunan herhangi bir öğeye kaydırıyor $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>

İşte göstermek için bir dalgıç

EDIT: yönlendirme ile kullanmak için

Açısal yönlendirmenizi her zamanki gibi ayarlayın, ardından aşağıdaki kodu ekleyin.

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ınız şöyle görünür:

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

İşte yönlendirme ve $ anchorScroll ile kaydırmayı gösteren bir Plunker

Ve daha da basit:

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ınız şöyle görünür:

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

Benim durumumda, yönlendirme mantığının modifiye edersem tekme olduğunu fark ettim $location.hash(). Aşağıdaki hile işe yaradı ..

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

Kullanımdan hemen gereken herhangi yönlendirme veya başka bir şey değiştirmeye gerek yoktur target="_self"bağlantıları oluştururken

Misal:

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

Ve bu idözelliği html öğelerinizde şu şekilde kullanın:

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

Yorumlarda ;-) belirtilen / belirtilen şekilde ## kullanmaya gerek yoktur.

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

Rotayı her zaman biliyorsanız, sabitlemeyi şu şekilde ekleyebilirsiniz:

href="#/route#anchorID

routegeçerli açısal rota nerede ve sayfadaki anchorIDbir <a id="anchorID">yerle eşleşiyor

$anchorScroll bunun için çalışır, ancak Angular'ın daha yeni sürümlerinde kullanmanın çok daha iyi bir yolu vardır.

Şimdi, $anchorScrollhash'ı isteğe bağlı bir argüman olarak kabul eder, bu yüzden değiştirmeniz gerekmez$location.hash . ( dokümantasyon )

Bu en iyi çözümdür çünkü rotayı hiç etkilemez. Çalışmak için diğer çözümlerden hiçbirini alamadım çünkü ngRoute kullanıyorum ve ayarladığım anda rota yeniden yüklenecek$location.hash(id) , $anchorScrollsihrini yapmadan önce .

İşte nasıl kullanılacağı ... ilk olarak, direktif veya kontrolörde:

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

ve sonra görünümde:

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

Ayrıca, sabit bir gezinme çubuğunu (veya başka bir kullanıcı arayüzünü) hesaba katmanız gerekirse, $ anchorScroll için ofseti şu şekilde ayarlayabilirsiniz (ana modülün çalışma işlevinde):

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

Bu, DOM ile uğraştığımız için daha Angular-y gibi görünen bir direktif kullanarak çözümümdü:

Buraya gel

github

KOD

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>

$ AnchorScroll hizmetini kullandım. Karma değiştirme ile birlikte giden sayfa yenilemesine karşı koymak için devam ettim ve locationChangeStart olayını iptal ettim. Bir ng-switch bağladım bir yardım sayfası vardı ve yenileme esentially uygulamayı kıracaktı çünkü bu benim için çalıştı.

Açısal yollar için bir karma önek ayarlamaya çalışın $locationProvider.hashPrefix('!')

Tam örnek:

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

Uygulamam için rota mantığında bu sorunu çözdüm.

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

Bu eski bir yazı, ancak uzun zamandır çeşitli çözümleri araştırdım, bu yüzden bir tane daha basit olanı paylaşmak istedim. Sadece ekleyerek target="_self"için <a>etiketi benim için düzelttim. Bağlantı çalışıyor ve beni sayfadaki doğru konuma götürüyor.

Bununla birlikte, Angular URL'deki # ile hala bir tuhaflık enjekte eder, bu nedenle gezinme için geri düğmesini ve bu yöntemi kullandıktan sonra böyle bir sorunla karşılaşabilirsiniz.

Bu ngView için yeni bir özellik olabilir, ancak öznitelik ve 'çift karma' angular-routekullanarak çalışmak için çapa karma bağlantıları elde edebildim ngView autoscroll.

ngView (otomatik kaydırmaya bakın)

(Açılı kayış ile aşağıdaki kod kullanılmıştır)

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

Bunu şöyle yapabilirdim:

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

Belirtilen öğeye kaydırılacak özel yönerge oluşturarak (sabit kodlu "SSS" ile) bir tür kirli çözüm var

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>

Kullanmak istemiyorsanız ng-clickalternatif bir çözüm. filterGeçerli duruma göre doğru url'yi oluşturmak için a kullanır . Örneğim ui.router kullanıyor .

Bunun yararı, kullanıcının bağlantının nereye gittiğini görmesidir.

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

Filtre:

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

Ng-route ile çözümüm bu basit direktifti:

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

Html şöyle görünüyor:

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

AnchorScroll'u kullanmayı deneyebilirsiniz .

Misal

Yani kontrolör şöyle olurdu:

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

Ve görüş:

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

... ve bağlantı kimliği için sır yok:

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

Angular uygulamamı bir çapa opon yüklemesine kaydırmaya çalışıyordum ve $ routeProvider'ın URL yeniden yazma kurallarına koştum.

Uzun deneylerden sonra buna karar verdim:

1. Angular uygulama modülünün .run () bölümünden bir document.onload olay işleyicisi kaydedin.
2. işleyicide, bazı dize işlemleri yaparak orijinalin ankraj etiketinin ne olması gerektiğini öğrenin.
3. stripped down anchor tag ile location.hash'i geçersiz kıl ($ routeProvider'ın hemen "# /" kuralıyla tekrar üzerine yazmasına neden olur. Ama sorun değil, çünkü Angular artık URL 4'te neler olduğu ile senkronize) $ 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();
			}
		}	 
 });

Bunun her zaman çalışıp çalışmadığından% 100 emin değilim, ancak uygulamamda bu beklenen davranışı veriyor.

Diyelim ki HAKKINDA sayfasındasınız ve aşağıdaki rotanız var:

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

Şimdi, HTML'de

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

Sonuç olarak

Çapadan önce sayfa adını eklemek benim için hile yaptı. Düşüncelerinizi bana bildirin.

Dezavantaj

Bu, sayfayı yeniden oluşturur ve ardından bağlantıya geçer.

GÜNCELLEME

Daha iyi bir yol aşağıdakileri eklemektir:

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

Kaydırma özelliğinizi kolayca alın. Ek bir özellik olarak Animasyonlu / Düzgün kaydırmayı da destekler . Açısal Kaydırma kütüphanesi için detaylar :

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

Bower :bower install --save angular-scroll

npm :npm install --save angular-scroll

Küçültülmüş versiyon - sadece 9kb

Yumuşak Kaydırma (hareketli kaydırma) - evet

Casus Kaydırma - evet

Dokümantasyon - mükemmel

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

Bu yardımcı olur umarım.

@Stoyan'a dayanarak aşağıdaki çözümü buldum:

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

Rota değişikliğinde sayfanın en üstüne kaydırılır.

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

bu kodu kontrolörünüze koyun.

Aklımda @slugslog vardı, ama bir şeyi değiştirirdim. Bunun yerine replace kullanacağım, böylece geri ayarlamak zorunda değilsiniz.

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

"Yöntemi değiştir" için Google Dokümanlar Ara

Yukarıdaki çözümlerin hiçbiri benim için çalışmıyor, ama bunu denedim ve işe yaradı,

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

Bu yüzden indeks sayfasıyla başlamak için sayfayı bilgilendirmem ve sonra geleneksel çapayı kullanmam gerektiğini fark ettim.

Angularjs uygulama karma navigasyon bazen çalışmıyor ve bootstrap jquery javascript kütüphaneleri, target="_self"çapa etiketine eklemek için , bu tür gezinme işlemlerini kapsamlı bir şekilde kullanır . Örneğin<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

Bkz. Https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ routeProvider

[reloadOnSearch = true] - {boolean =} - yalnızca $ location.search () veya $ location.hash () değiştiğinde rotayı yeniden yükle.

Bunu yanlış olarak ayarlamak, yukarıdakilerin hepsi olmadan hile yaptı.

AngularJS 1.3.15 kullanıyorum ve özel bir şey yapmak zorunda değilim gibi görünüyor.

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

Yani, benim html benim için aşağıdaki çalışır:

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

Denetleyicimde veya JavaScript'te hiç değişiklik yapmak zorunda kalmadım.