Question

我在很长的列表视图中有很多项目。我的用户如何通过访问mypage.html＃the_item_id跳转到（即书签）特定项目？

实际上，它可以在我使用内联视图[样本1]时使用，但在使用局部视图[样本2]时则不行。在后一种情况下是否存在错误，或者我必须使用任何解决方法吗？

提前致谢！

示例1：您可以访问page.html＃a100查看项目100 ::

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script>
        function MainCtrl($scope){
            $scope.items = [];
            for(var i=0; i<200; i++){$scope.items.push({id: i})}
        }
    </script>
  </head>
  <body ng-controller='MainCtrl'>
    <div>
      <ul>
        <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
      </ul>
    </div>
  </body>
</html>

示例2：无法访问page2.html＃a100查看第100项，为什么？ ::

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script>
        function MainCtrl($scope){
            $scope.items = [];
            for(var i=0; i<200; i++){$scope.items.push({id: i})}
        }
    </script>
  </head>
  <body ng-controller='MainCtrl'>
    <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div>
  </body>
</html>

这是示例2 ::

所需的scroll_view.html

<div>
  <ul>
    <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
  </ul>
</div>

Answer 1

您必须在ng-include上使用 autoscroll 属性。

点击此处的文档：http://docs.angularjs.org/api/ng.directive:ngInclude

autoscroll（可选） - {string =} - ngInclude是否应该在加载内容后调用$ anchorScroll来滚动视口。如果未设置该属性，请禁用滚动。如果设置的属性没有值，则启用滚动。否则，仅在表达式求值为真值时才启用滚动。

所以在你的情况下：

<div ng-include="'scroll_view.html'" autoscroll></div>

Answer 2

我认为html5Mode需要设置为true，但我不确定。看看这是否对你有用（它对我有用，但我只在Chrome 23上测试，使用file：///加载页面）：

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
    <script type="text/ng-template" id="scroll_view.html">
      <div>
        <ul>
          <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
        </ul>
      </div>
    </script>
    <script>
        function MainCtrl($scope){
            $scope.items = [];
            for(var i=0; i<200; i++){$scope.items.push({id: i})}
        }
    </script>
  </head>
  <body ng-controller='MainCtrl'>
    <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div>
  </body>
</html>

app.js：

var app = angular.module('app', []).
  config(function($locationProvider) {
     $locationProvider.html5Mode(true);
  })

如何在角度局部视图中跳转到锚点？

2 个答案: