在页面重新加载时滚动页面到哈希位置 - AngularJS

Question

我正在使用angularJS开发一个网站,并使用twitter bootstrap进行UI.我有一些Ids与某个部分关联的哈希,因此当用户点击导航时,页面向下滚动到该部分.它对我来说很好.

这里的网站链接:https: //powerful-cliffs-1105.herokuapp.com/about

现在在关于页面.我有正确的导航,将页面滚动到特定位置.但是当我重新加载该页面时,页面从顶部开始并且不向下滚动到hash位置,例如https://powerful-cliffs-1105.herokuapp.com/about#management

针对上述问题有两种解决方案:

1. 当我们重新加载该页面时,从URL中删除哈希标记.
2. 在页面重新加载时将页面滚动到特定(哈希)部分.

由于我还在学习angularJS,我无法找到上述问题的任何具体解决方案.

任何帮助是极大的赞赏.

Answer 1

使用该$anchorScroll服务.

这里的问题是,Angular会以动态方式加载about内容,所以当你有哈希时,你没有准备好内容.$anchorScroll跟踪哈希并为您滚动它.

// Just borrow from your code    
angular.module('aboutController', []).controller('aboutController',['$scope', '$location', '$anchorScroll', 
    function($scope, $location, $anchorScroll) {

  $scope.isActive = function(route){
     return route === $location.hash();
  }

  $anchorScroll();
}]);

编辑31/12:

由于Mohit(问题的创建者)说我的解决方案对他不起作用,我决定下载代码并在本地工作.我的解决方案在本地工作,这让我感到震惊,但我想在代码中指出一些可能(或者很可能不是)可以解决问题的版本.

将脚本移动到页面底部(index.html)

<!-- ANGULAR DYNAMIC CONTENT -->
  <div class="body" ng-view></div>

  <!-- FOOTER -->
  <footer ng-include="'views/footer.html'"></footer>

  <!-- JS -->
  <script src="js/libs/angular/angular.min.js"></script>
  <script src="js/libs/angular-bootstrap/ui-bootstrap.min.js"></script>
  <script src="js/libs/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  <script src="js/libs/angular-route/angular-route.min.js"></script>

  <!-- ANGULAR CUSTOM CONTROLLERS -->
  <script src="js/controllers/home.js"></script>
  <script src="js/controllers/about.js"></script>
  <script src="js/controllers/contact.js"></script>

  <!-- ANGULAR CUSTOM FACTORIES -->
  <script src="js/services/contact.js"></script>

  <!-- UTILITY FILE -->
  <script src="js/utils/util.js"></script>

  <!-- ANGULAR CUSTOM ROUTES AND APP -->
  <script src="js/route-provider.js"></script>
  <script src="js/app.js"></script>
</body>

暂时删除/评论html5Mode(route-provider.js)

// $locationProvider.html5Mode(true);

并/#/在访问URL之前附加,如下所示

暂停

到目前为止,这是我不建议的,但肯定你可以试一试

$timeout(function() {
    $anchorScroll(); 
}, 0)