угловой прокрутить div на кнопку нажмите

Question

Я просто изучаю угловой и имею проблему, я просто не могу понять, как ее решить.

Я пытаюсь добиться следующего.

---

Вкладка А/Вкладка B/C Tab

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

содержание в фиксированной высоте контейнер

---

при нажатии на вкладку, некоторое содержимое загружается с помощью JSON и отображается в контейнере. Поскольку у меня много контента, я получаю полосу прокрутки.

Что я хочу сделать сейчас: Сохраните позицию scrollTop для каждой вкладки, чтобы вы могли продолжить чтение, когда вы ушли, когда вы переключаете вкладки.

В настоящее время у меня есть директива по содержимому 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 в эту позицию, когда я нажимаю одну из вкладок.

Каков правильный угловой путь?

Используя ng-щелчок на вкладках, а затем прокрутите div? Используя что-то вроде $ watch внутри директивы, чтобы увидеть, какая вкладка нажата?

Помощь была бы очень признательна, так как я мог найти только примеры, где весь документ был прокручен, что легко адресовать. Но я просто не знаю, как получить эту связь между кнопками вкладок и div.

Благодаря Markus

Answer 1

Посмотрите на $ anchorScroll. Вы можете установить yOffset на нее перед вызовом функции.

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

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

Update:

Так что я решил это. Мой первый ответ был слишком поспешным.

Вот ссылка на plnkr (также встроен в пост, хотя): 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>