AngularJS锚点击不工作第二次

这里是我的Demo 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为
第二次点击同链接它不会做任何事

我做错了什么？或者这与角度有关？

注：破解这个是使用点击事件，这应该工作找的使用角度和路由版直方案

1.5.5

*增加赏金

来源

2017-08-16 Peru

请回答工作发布。希望能帮助到你。 –

试试这个：

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

希望这有助于。

来源

2017-08-16 22:24:42

不，我不想使用点击事件 – Peru

问题是，只有当位置发生变化时，才会向下滚动，但在您的情况下不是，因为您总是去#one。这里是[示例]（http://plnkr.co/edit/uw5r4PVX9DErM4HYM87H?p=preview）。你需要使用点击事件来获得你想要的或者将一些uuid加入到网址以保证不平等。 – slesh

@slesh这不会或者如果你点击两次相同的链接。如果你改变路线，预计没有问题 – Peru

我检查你的plunkr，我注意到你没有指定路线，给锚标记时，因此“$ routeChangeSuccess”不会被触发，当我改变特定行此

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

我锚点滚动正常工作。

解决方案：Plunkr

请注意HTML5模式的挑战，路由，here，如果您还没有考虑到这一点。

来源

2017-08-22 08:13:43

Spot On ..我们如何处理这种情况下，如果我们有主页中的 Peru

@Peru检查此链接的多个视图[这里]（http://plnkr.co/edit/f0e3LNEUzwXMZmaPUaRV?p=preview）为不同的意见。对于不同的局部视图检查此链接[here]（http://plnkr.co/edit/L0q2NFYFbmHUEfCdyYwv?p=preview） –

@Peru是你的问题解决？ –

你基本上需要触发anchorscroll()的locationchange。为此，您不需要检查$routeChangeSuccess。您可以直接使用$locationChangeStart

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

为了既$routeChangeSuccess或$locationChangeStart你需要指定routename到anchor标签如下

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

更新Plunkr

来源

2017-08-22 10:00:22 Webruster

AngularJS锚点击不工作第二次

回答

相关问题