AngularJS Якорь не работает второй раз

вот мой Демо

app.run(function($rootScope, $location, $anchorScroll) {
      //when the route is changed scroll to the proper element.
      $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
        console.log("called routeChangeSuccess");
        if ($location.hash()) $anchorScroll();
      });
    });

Нажмите перейти к концу одного, он перейдет к div с id
Второй раз нажмите на ту же ссылку, что он ничего не сделает

Что я делаю неправильно? или это связано с angular?

Примечание: взлом для этого будет использовать событие click, и это должно работать, ища прямые решения.

с использованием angular и маршрутной версии 1.5.5

* добавил Bounty

Ответы

Ответ 1

Я проверил ваш plunkr, я заметил, что вы не указали маршрут при предоставлении тега привязки, поэтому "$ routeChangeSuccess" не запускается, когда я меняю конкретную строку на эту

<a href="/one/#one"> go to end of one </a>

Я поддерживаю прокрутку правильно.

Решение: Plunkr

Обратите внимание на проблемы режима HTML5 при маршрутизации здесь, если вы еще не учли это.

Ответ 2

Вам в основном нужно вызвать anchorscroll() на locationchange. Для этого вам не нужно проверять $routeChangeSuccess. вы можете напрямую использовать $locationChangeStart

           $rootScope.$on('$locationChangeStart', function(event) {
                          $anchorScroll();
                 });

Чтобы работать как с $routeChangeSuccess, так и с $locationChangeStart, вам нужно указать имя маршрута тегу anchor следующим образом

<a href="/one/#one"> go to end of one </a>

Обновлено Plunkr

Ответ 3

попробуйте следующее:

    <head>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
       <base href="/"/>
    </head>

    <body ng-app="myApp">
    <a ng-click="goTo('#one')" > go to end of one </a>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <div id="one">
      This is one.
    </div>
      <div ng-view></div>

      <script>
        var app = angular.module("myApp", ["ngRoute"]);
        app.run(function($rootScope, $location, $anchorScroll) {
          //when the route is changed scroll to the proper element.
          // $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
          //   console.log("called routeChangeSuccess");
          //   if ($location.hash()) $anchorScroll();
          // });
          $rootScope.goTo = function(value){
            $location.hash(value);
          };
        });
        app.config(function($routeProvider, $locationProvider) {
          $routeProvider
            .when("/", {
              templateUrl: "/one.html"
            })
            .when("/one", {
              templateUrl: "/one.html"
            });
          $locationProvider.html5Mode(true).hashPrefix('!');
        });
      </script>
    </body>

    </html>

Надеюсь, что это поможет.