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

Question

我正在使用 angularJS 开发一个网站，并使用 twitter bootstrap 进行 UI。我有一些哈希 Ids与某个部分相关联，以便当用户单击导航时，页面会向下滚动到该部分。它对我来说工作正常。

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

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

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

当我们重新加载该页面时，请从 URL 中删除哈希标记。

在页面重新加载时将页面滚动到特定(哈希)部分。

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

任何帮助是极大的赞赏。

Answer 1

使用 $anchorScroll 服务。

这里的问题是 Angular 加载了 关于 内容动态，所以当你有 哈希 你没有准备好内容。 $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 之前， like this

设置一个超时

到目前为止，我不建议这样做，但是您当然可以试一试

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