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

I have many items in a long listview. How can my users jump to (i.e. bookmark) to a specific item by visiting mypage.html#the_item_id ?

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

Actually, it can when I use inline view [Sample 1], but not when I use partial view [Sample 2]. Is there a bug in the latter case, or must I use any workaround?

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

Thanks in advance!

提前致谢!

Sample 1: You can visit page.html#a100 to see item 100 ::

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

Sample 2: Can NOT visit page2.html#a100 to see item 100, WHY? ::

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

And this is the scroll_view.html needed by sample 2::

这是样本2所需的scroll_view.html ::

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

2 个解决方案

#1

You have to use autoscroll attribute on ng-include.

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

Check the docs here: http://docs.angularjs.org/api/ng.directive:ngInclude

查看这里的文档:http://docs.angularjs.org/api/ng.directive:ngInclude

autoscroll(optional) – {string=} – Whether ngInclude should call $anchorScroll to scroll the viewport after the content is loaded. If the attribute is not set, disable scrolling. If the attribute is set without value, enable scrolling. Otherwise enable scrolling only if the expression evaluates to truthy value.

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

So in your case:

所以在你的情况下:

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

#2

I think html5Mode needs to be set to true, but I'm not certain. See if this works for you (it did for me, but I only tested on Chrome 23 loading the page using file:///...):

我认为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);
  })

#1