gpt4 book ai didi

angularjs - 如何在 Angular 的局部 View 中跳转到 anchor ?

转载 作者:行者123 更新时间:2023-12-03 00:06:10 25 4
gpt4 key购买 nike

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

实际上,当我使用内联 View [示例1]时可以,但当我使用部分 View [示例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>

关于angularjs - 如何在 Angular 的局部 View 中跳转到 anchor ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13785052/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com