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