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

发布时间：2020-12-17 10:19:52 所属栏目：安全来源：网络整理

导读：我在很长的列表视图中有很多项目.我的用户如何通过访问mypage.html#the_item_id跳转到(即书签)特定项目？实际上,它可以在我使用内联视图[样本1]时使用,但在使用局部视图[样本2]时则不行.在后一种情况下是否存在错误,或者我必须使用任何解决方法吗？提前致

我在很长的列表视图中有很多项目.我的用户如何通过访问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>

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

查看文档：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.

所以在你的情况下：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!