Jak obsługiwać łączenie skrótów kotwicy w AngularJS

Czy ktoś z was wie, jak ładnie obsługiwać łączenie skrótów kotwicy w AngularJS ?

Mam następujący znacznik dla prostej strony z najczęściej zadawanymi pytaniami

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

Po kliknięciu któregokolwiek z powyższych łączy AngularJS przechwytuje mnie i kieruje na zupełnie inną stronę (w moim przypadku strona 404, ponieważ nie ma tras pasujących do linków).

Moją pierwszą myślą było stworzenie pasującej trasy „ / faq /: rozdział ” i sprawdzenie odpowiedniego kontrolera $routeParams.chapterpo dopasowanym elemencie, a następnie użycie jQuery, aby przewinąć do niego.

Ale potem AngularJS znów sra na mnie i tak czy inaczej przewija do góry strony.

Czy ktoś tutaj zrobił coś podobnego w przeszłości i zna dobre rozwiązanie?

Edycja: Przejście na html5Mode powinno rozwiązać moje problemy, ale i tak musimy wesprzeć IE8 +, więc obawiam się, że nie jest to zaakceptowane rozwiązanie: /

Szukasz $anchorScroll().

Oto (kiepska) dokumentacja.

A oto źródło.

Zasadniczo po prostu wstrzykujesz go i wywołujesz w kontrolerze, a on przewinie cię do dowolnego elementu z identyfikatorem znalezionym w $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>

Oto plunker do zademonstrowania

EDYCJA: aby użyć tego z routingiem

Skonfiguruj routing kątowy jak zwykle, a następnie dodaj następujący kod.

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

a Twój link wyglądałby tak:

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

Oto Plunker pokazujący przewijanie z routingiem i $ anchorScroll

A jeszcze prostsze:

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

a Twój link wyglądałby tak:

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

W moim przypadku zauważyłem, że logika routingu się uruchamiała, jeśli zmodyfikowałem $location.hash(). Następująca sztuczka zadziałała ..

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

Nie trzeba zmieniać żadnego routingu ani niczego innego, czego trzeba użyć target="_self"podczas tworzenia łączy

Przykład:

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

I użyj idatrybutu w swoich elementach HTML takich jak:

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

Nie ma potrzeby używania ## jak wskazano / wspomniano w komentarzach ;-)

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

Jeśli zawsze znasz trasę, możesz po prostu dołączyć kotwicę w następujący sposób:

href="#/route#anchorID

gdzie routejest bieżąca trasa kątowa i anchorIDpasuje <a id="anchorID">gdzieś na stronie

$anchorScroll działa w tym celu, ale istnieje znacznie lepszy sposób na użycie go w nowszych wersjach Angulara.

Teraz $anchorScrollakceptuje skrót jako opcjonalny argument, więc nie musisz go wcale zmieniać $location.hash. ( dokumentacja )

To najlepsze rozwiązanie, ponieważ w ogóle nie wpływa na trasę. Nie mogłem zmusić żadnego z innych rozwiązań do działania, ponieważ używam ngRoute, a trasa załaduje się ponownie, gdy tylko ustawię $location.hash(id), zanim będzie $anchorScrollmogła wykonać swoją magię.

Oto jak go użyć ... po pierwsze, w dyrektywie lub kontrolerze:

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

a następnie w widoku:

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

Ponadto, jeśli musisz uwzględnić stały pasek nawigacyjny (lub inny interfejs użytkownika), możesz ustawić przesunięcie dla $ anchorScroll w następujący sposób (w funkcji uruchamiania modułu głównego):

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

To było moje rozwiązanie wykorzystujące dyrektywę, która wydaje się bardziej kątowa, ponieważ mamy do czynienia z DOM:

Plnkr tutaj

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>

Korzystałem z usługi $ anchorScroll. Aby przeciwdziałać odświeżaniu strony, które towarzyszy zmianie skrótu, poszedłem do przodu i anulowałem zdarzenie locationChangeStart. To działało dla mnie, ponieważ miałem stronę pomocy podłączoną do przełącznika ng, a odświeżenia zasadniczo spowodowałyby uszkodzenie aplikacji.

Spróbuj ustawić prefiks skrótu dla tras kątowych $locationProvider.hashPrefix('!')

Pełny przykład:

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

Obejrzałem to w logice trasy dla mojej aplikacji.

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

To jest stary post, ale długo szukałem różnych rozwiązań, więc chciałem podzielić się jeszcze jednym prostym. Właśnie dodanie target="_self"do <a>tagu naprawiło to dla mnie. Link działa i zabiera mnie do właściwej lokalizacji na stronie.

Jednak Angular nadal wprowadza dziwność z # w adresie URL, więc możesz napotkać problemy przy użyciu przycisku Wstecz do nawigacji i tak po użyciu tej metody.

Może to być nowy atrybut ngView, ale udało mi się uzyskać linki kotwiczące do pracy z angular-routeużyciem ngView autoscrollatrybutu i „podwójnych skrótów”.

ngView (patrz automatyczne przewijanie)

(Poniższy kod został użyty z paskiem kątowym)

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

Mógłbym to zrobić tak:

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

Oto rodzaj nieprzyjemnego obejścia, tworząc niestandardową dyrektywę, która będzie przewijać do określonego elementu (z zakodowanym „faq”)

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>

Jeśli nie chcesz używać, ng-clickoto alternatywne rozwiązanie. Używa a filterdo wygenerowania poprawnego adresu URL na podstawie bieżącego stanu. Mój przykład używa ui.router .

Zaletą jest to, że użytkownik zobaczy, gdzie link przechodzi w dymek.

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

Filtr:

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

Moim rozwiązaniem z ng-route była ta prosta dyrektywa:

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

HTML wygląda następująco:

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

Możesz spróbować użyć anchorScroll .

Przykład

Tak więc kontrolerem będzie:

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

I widok:

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

... i nie ma tajemnicy dla identyfikatora kotwicy:

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

Próbowałem zmusić moją aplikację Angular do przewinięcia do ładowania kotwicy i natknąłem się na reguły przepisywania adresów URL $ routeProvider.

Po długich eksperymentach zdecydowałem się na to:

1. zarejestruj moduł obsługi zdarzeń document.onload w sekcji .run () modułu aplikacji Angular.
2. w module obsługi dowiedz się, jaki miał być oryginał w tagu anchor, wykonując kilka operacji na łańcuchach.
3. override location.hash ze zmniejszonym tagiem kotwicy (co powoduje, że $ routeProvider natychmiast zastępuje go ponownie swoją regułą „# /”. Ale to dobrze, ponieważ Angular jest teraz zsynchronizowany z tym, co dzieje się w adresie URL 4) $ 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();
			}
		}	 
 });

Nie jestem w 100% pewien, czy to działa cały czas, ale w mojej aplikacji daje to oczekiwane zachowanie.

Powiedzmy, że jesteś na stronie O NAS i masz następującą trasę:

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

Teraz w tobie 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>

Podsumowując

Uwzględnienie nazwy strony, zanim kotwica załatwiła sprawę. Daj mi znać o swoich myślach.

Minusem

Spowoduje to ponowne renderowanie strony, a następnie przewinięcie do kotwicy.

AKTUALIZACJA

Lepszym sposobem jest dodanie następujących elementów:

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

Uzyskaj łatwo funkcję przewijania. Obsługuje także przewijanie animowane / płynne jako dodatkową funkcję. Szczegóły dotyczące biblioteki Angular Scroll :

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

Altana :bower install --save angular-scroll

npm :npm install --save angular-scroll

Wersja Minfied - tylko 9kb

Płynne przewijanie (animowane przewijanie) - tak

Przewiń Szpiega - tak

Dokumentacja - doskonała

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

Mam nadzieję że to pomoże.

Na podstawie @Stoyan opracowałem następujące rozwiązanie:

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

Przy zmianie trasy przewinie się do góry strony.

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

umieść ten kod na kontrolerze.

Moim zdaniem @slugslog miał to, ale chciałbym zmienić jedną rzecz. Zamiast tego użyłbym zamiennika, więc nie trzeba go ustawiać z powrotem.

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

Dokumenty Wyszukaj „Zamień metodę”

Żadne z powyższych rozwiązań nie działa dla mnie, ale właśnie wypróbowałem to i zadziałało,

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

Uświadomiłem sobie, że muszę powiadomić stronę, aby rozpocząć od strony indeksu, a następnie użyć tradycyjnej kotwicy.

Kiedyś w aplikacji angularjs nawigacja skrótu nie działa, a biblioteki javascript jquery bootstrap w szerokim zakresie wykorzystują ten rodzaj nawigacji, aby działał, dodając go target="_self"do tagu anchor. na przykład<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

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

[reloadOnSearch = true] - {boolean =} - przeładuj trasę, gdy zmieni się tylko $ location.search () lub $ location.hash ().

Ustawienie tej wartości na false spowodowało, że nie udało mi się wykonać powyższych czynności.

Używam AngularJS 1.3.15 i wygląda na to, że nie muszę robić nic specjalnego.

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

Tak więc w moim html działa dla mnie:

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

W ogóle nie musiałem wprowadzać żadnych zmian w moim kontrolerze ani JavaScript.