angular 单击按钮时滚动 div

Question

我刚刚开始学习 angular 遇到了一个问题，我不知道如何解决它。

我正在努力实现以下目标。

选项卡 A/选项卡 B/选项卡 C

................................................

固定高度容器中的内容

当我单击一个选项卡时，一些内容通过 json 加载并显示在容器中。由于内容很多，我得到了一个滚动条。

我现在要做的是：存储每个Tab的scrollTop Position，这样当你切换Tab时，你可以继续阅读你离开的地方。

目前我有一个关于内容 div 的指令，每当 div 滚动时触发，并将 scrollTop 位置存储在一个数组中，与当前活动的选项卡相关.

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-click 选项卡然后滚动 div? 在指令中使用类似 $watch 的东西来查看单击了哪个选项卡？

非常感谢您的帮助，因为我只能找到滚动整个文档的示例，这很容易解决。但我只是不知道如何在选项卡按钮和 div.

之间建立这种关系

谢谢马库斯

Answer 1

查看 $anchorScroll。您可以在调用该函数之前对其设置一个 yOffset。

$anchorScroll.yOffset = 122; 
$anchorScroll();

https://docs.angularjs.org/api/ng/service/$anchorScroll

更新：

所以我解决了这个问题。我的第一个回答太草率了。

这是一个 link 到 plnkr（虽然也嵌入到 post）：http://embed.plnkr.co/kwPkFDfyJctfPRFPPLyk

滚动第一个选项卡，单击第二个选项卡，然后返回第一个选项卡。

我在指令的隔离作用域中添加了一个pos变量，并从主控制器传入作用域变量。这样指令可以在双向绑定变量上设置滚动位置。下次单击该选项卡时，该指令通过其 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>

angular 单击按钮时滚动 div

angular Scroll div on button click

scroll

directive

angularjs

angularjs-ng-click