Як поводитися з анкерним хеш-з'єднанням в AngularJS

Хтось із вас знає, як красиво обробити анкерний хеш-зв'язок у AngularJS ?

У мене є така розмітка для простої сторінки поширених запитань

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

При натисканні на будь-яке з перерахованих вище посилань AngularJS перехоплює і спрямовує мене на зовсім іншу сторінку (в моєму випадку 404-сторінку, оскільки немає маршрутів, що відповідають посиланням.)

Моя перша думка полягала в тому, щоб створити відповідність маршруту " / faq /: Chapter " і у відповідному контролері перевірити $routeParams.chapterвідповідний елемент, а потім використовувати jQuery для прокручування вниз до нього.

Але потім AngularJS знову впивається в мене і все одно просто прокручується вгору сторінки.

Отже, хтось тут робив щось подібне в минулому і знає добре рішення?

Редагувати: Перехід на html5Mode повинен вирішити мої проблеми, але ми все одно повинні підтримувати IE8 + так чи інакше, боюся, це не прийняте рішення: /

Ви шукаєте $anchorScroll().

Ось (шалена) документація.

І ось джерело.

В основному ви просто вводите його і називаєте його у своєму контролері, і він прокрутить вас до будь-якого елемента з ідентифікатором, знайденим у $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>

Ось планкер для демонстрації

EDIT: використовувати це для маршрутизації

Налаштуйте свою кутову маршрутизацію як зазвичай, а потім просто додайте наступний код.

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 href="#/test?scrollTo=foo">Test/Foo</a>

Ось Plunker, що демонструє прокрутку маршрутизацією та $ anchorScroll

І навіть простіше:

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 href="#/test#foo">Test/Foo</a>

У моєму випадку я помітив, що логіка маршрутизації починається, якщо я змінюю $location.hash(). Наступна хитрість спрацювала ..

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

Немає необхідності змінювати маршрутизацію або щось інше, просто потрібно використовувати target="_self"для створення посилань

Приклад:

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

І використовуйте idатрибут у своїх елементах html, як це:

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

Не потрібно використовувати ## як вказано / згадується в коментарях ;-)

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

Якщо ви завжди знаєте маршрут, ви можете просто додати якір таким чином:

href="#/route#anchorID

де routeпоточний кутовий маршрут і anchorIDвідповідає <a id="anchorID">десь на сторінці

$anchorScroll працює для цього, але є набагато кращий спосіб використовувати його в новіших версіях Angular.

Тепер, $anchorScrollприймає хеш як необов'язковий аргумент, тому вам зовсім не доведеться змінювати $location.hash. ( документація )

Це найкраще рішення, оскільки воно зовсім не впливає на маршрут. Я не зміг працювати жодне з інших рішень, тому що я використовую ngRoute, і маршрут перезавантажиться, як тільки я встановлю $location.hash(id), перед цим$anchorScroll зробити свою магію.

Ось як його використовувати ... по-перше, в директиві чи контролері:

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

а потім у вигляді:

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

Крім того, якщо вам потрібно врахувати фіксований навбар (або інший інтерфейс), ви можете встановити зміщення для $ anchorScroll так (у функції запуску основного модуля):

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

Це було моє рішення з використанням директиви, яка здається більш угловою-у, оскільки ми маємо справу з DOM:

Plnkr тут

github

КОД

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. Щоб протидіяти оновленню сторінки, яке відбувається разом із зміною хешу, я пішов і скасував подію locationChangeStart. Це працювало для мене, оскільки у мене була сторінка довідки, підключена до ng-перемикача, і оновлення суттєво зламає додаток.

Спробуйте встановити хеш-префікс для кутових маршрутів $locationProvider.hashPrefix('!')

Повний приклад:

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

Я обійшов це в логіці маршруту для свого додатка.

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

Це стара публікація, але я довго проводив дослідження різних рішень, тому хотів поділитися ще одним простим. Просто додавання target="_self"до <a>тегу виправило це для мене. Посилання працює і переносить мене до потрібного місця на сторінці.

Однак Angular все-таки вводить деяку дивацтво з # в URL-адресі, так що ви можете зіткнутися з проблемою за допомогою кнопки "Назад" для навігації та іншого після використання цього методу.

Це може бути новий атрибут для ngView, але я зміг змусити його прив’язувати хеш-посилання для роботи з angular-routeвикористанням ngView autoscrollатрибута та "подвійних хешей".

ngView (див. автоматичне прокручування)

(Наступний код використовувався з кутовим ремінцем)

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

Я міг би зробити це так:

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

Ось такий брудний спосіб вирішення, створивши власну директиву, яка прокручує вказаний елемент (із твердо кодованим "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>

Якщо вам не подобається використовувати ng-clickось альтернативне рішення. Він використовує a filterдля створення правильного URL-адреси на основі поточного стану. Мій приклад використовує ui.router .

Перевага полягає в тому, що користувач побачить, де посилання переходить на курсор.

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

Фільтр:

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

Моє рішення з ng-route була такою простою директивою:

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

Html виглядає так:

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

Ви можете спробувати використати anchorScroll .

Приклад

Отже, контролером буде:

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

І вид:

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

... і немає секрету для ідентифікатора якоря:

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

Я намагався зробити так, щоб мій додаток Angular прокручувався до опорного завантаження і наштовхувався на правила перезапису URL-адреси $ routeProvider.

Після довгих експериментів я зупинився на цьому:

1. зареєструйте обробник подій document.onload події з розділу .run () модуля Angular app.
2. в обробнику з’ясуйте, яким повинен був бути оригінал тега прив’язки, виконуючи деякі рядкові операції.
3. замініть location.hash за допомогою зніманого тега прив’язки (що змушує $ routeProvider негайно перезаписати його знову за допомогою правила "# /". Але це добре, тому що Angular тепер синхронізується з тим, що відбувається в 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();
			}
		}	 
 });

Я не на 100% впевнений, що це працює весь час, але в моєму застосуванні це дає мені очікувану поведінку.

Скажімо, ви знаходитесь на сторінці ПРО ПРОГРАМУ та маєте такий маршрут:

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

Тепер у вас 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>

На закінчення

Включаючи назву сторінки до того, як якір зробив для мене трюк. Дайте мені знати про ваші думки.

Нижня частина

Це відновить сторінку, а потім прокрутіть до якоря.

ОНОВЛЕННЯ

Кращий спосіб - додати наступне:

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

Отримайте свою функцію прокрутки легко. Він також підтримує анімаційну / плавну прокрутку як додаткову функцію. Деталі для бібліотеки кутової прокрутки :

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

Чаша :bower install --save angular-scroll

npm :npm install --save angular-scroll

Мінімізована версія - всього 9кб

Плавне прокручування (анімована прокрутка) - так

Прокрутіть шпигуна - так

Документація - відмінна

Демо - http://oblador.github.io/angular-scroll/

Сподіваюсь, це допомагає.

На основі @Stoyan я придумав таке рішення:

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

Під час зміни маршруту він буде прокручуватися вгору сторінки.

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

покладіть цей код на свій контролер.

У моїй думці це було @slugslog, але я змінив би одне. Я б замість цього застосував заміну, тому вам не доведеться її встановлювати назад.

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

Документи шукають "Замінити метод"

Жодне з наведених вище рішень для мене не працює, але я просто спробував це, і воно спрацювало,

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

Тож я зрозумів, що потрібно повідомити сторінку, щоб почати з індексної сторінки, а потім використати традиційний якір.

Іноді в програмі angularjs хеш-навігація не працює, і бібліотеки jquery jaquery jaquery широко використовують цей тип навігації, щоб змусити її працювати додавати target="_self"тег прив’язки. напр<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

Дивіться https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ routeProvider

[reloadOnSearch = true] - {boolean =} - перезавантажити маршрут, коли змінюються лише $ location.search () або $ location.hash ().

Встановлення цього значення неправдиво зробило трюк без усього вищезазначеного для мене.

Я використовую AngularJS 1.3.15 і, схоже, мені нічого особливого не потрібно робити.

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

Отже, у моєму html працює наступне:

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

Мені взагалі не довелося вносити жодних змін до свого контролера чи JavaScript.