6

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

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

提前致谢！

示例 1：您可以访问 page.html#a100 以查看 item 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>
4

2 回答 2

5

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

在此处查看文档：http://docs.angularjs.org/api/ng.directive: ngInclude

autoscroll(optional) – {string=} – ngInclude 是否应该调用 $anchorScroll 在内容加载后滚动视口。如果未设置该属性，则禁用滚动。如果属性设置为没有值，则启用滚动。否则，仅当表达式计算为真值时才启用滚动。

所以在你的情况下：

<div ng-include="'scroll_view.html'" autoscroll></div>
于 2012-12-10T21:04:59.760 回答
1

我认为 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>

应用程序.js：

var app = angular.module('app', []).
  config(function($locationProvider) {
     $locationProvider.html5Mode(true);
  })
于 2012-12-11T17:28:15.077 回答