我刚刚学习 Angular，遇到一个问题，我只是不知道如何解决它。
我正在努力实现以下目标。
选项卡 A/选项卡 B/选项卡 C
................................
固定高度容器中的内容
当我单击选项卡时，一些内容会通过 json 加载并显示在容器中。由于内容很多，我得到了一个滚动条。
我现在想做的是:存储每个选项卡的scrollTop位置，这样当你切换选项卡时你可以继续阅读你离开的地方。
目前，我在内容 div 上有一个指令，每当 div 滚动时就会触发该指令，并将滚动顶部位置存储在与当前事件的选项卡相关的数组中。
app.directive("scrollPosition", function(){
return{
restrict: 'A',
link: function(scope , element){
element.bind("scroll", function(){
scope.scrollPosition[scope.tab.categoryIndex]=element.scrollTop();
});
}
}
})
到目前为止，这有效。
但是当我单击其中一个选项卡时，我不知道如何使用这个存储的 ScrollTop 值将 div 设置到该位置。
正确的 Angular 方式是什么？
使用 ng 单击选项卡，然后滚动 div？ 在指令中使用类似 $watch 的东西来查看单击了哪个选项卡？
非常感谢您的帮助，因为我只能找到整个文档滚动的示例，这很容易解决。但我只是不知道如何获得选项卡按钮和 div 之间的这种关系。
谢谢 马库斯
最佳答案
查看 $anchorScroll。您可以在调用该函数之前为其设置 yOffset。
$anchorScroll.yOffset = 122;
$anchorScroll();
https://docs.angularjs.org/api/ng/service/ $anchorScroll
更新:
所以我解决了这个问题。我的第一个回答太仓促了。
这里是 plnkr 的链接(不过也嵌入到帖子中):http://embed.plnkr.co/kwPkFDfyJctfPRFPPLyk
滚动第一个选项卡，单击第二个选项卡，然后返回第一个选项卡。
我将一个 pos 变量添加到指令的隔离范围，并从主 Controller 传入范围变量。这样指令就可以在双向绑定(bind)变量上设置滚动位置。下次单击该选项卡时，该指令将通过其 scope.pos 变量将其元素上的滚动位置设置为最后滚动到的位置。希望这有帮助!
(function() {
'use strict';
var app = angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
"title": 'One',
"url": 'one.tpl.html',
"pos": 0
}, {
"title": 'Two',
"url": 'two.tpl.html',
"pos": 0
}, {
"title": 'Three',
"url": 'three.tpl.html',
"pos": 0
}];
$scope.$watch('tabs', function(val) {
console.log("Yay!!! It's working! Val=" + val[0].pos);
}, true);
$scope.currentTab = $scope.tabs[0];
$scope.onClickTab = function(tab) {
$scope.currentTab = tab;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab.url;
};
}]);
app.directive("scrollPosition", function() {
return {
restrict: 'A',
scope: {
pos: "="
},
transclude: false,
link: function(scope, element) {
element[0].onscroll = function() {
scope.pos = element[0].scrollTop;
console.log(scope.pos);
scope.$apply();
};
element[0].scrollTop = scope.pos;
}
};
});
})();ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 5px 0px 5px;
background-color: #CCC;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
#viewOne, #viewTwo, #viewThree {
overflow: scroll;
height: 200px;
}
.active {
background-color: #FFF;
color: #000;
}<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab.url"></div>
{{currentTab.pos}}
</div>
<script type="text/ng-template" id="one.tpl.html">
<div id="viewOne" scroll-position pos="currentTab.pos">
<h1>View One</h1>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div id="viewTwo" scroll-position pos="currentTab.pos">
<h1>View Two</h1>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
<script type="text/ng-template" id="three.tpl.html">
<div id="viewThree" scroll-position pos="currentTab.pos">
<h1>View Three</h1>
<p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet
arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
</div>
</div>
</body>
</html>关于angularjs - 单击按钮时的 Angular 滚动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32128282/