Как прокручивать DIV в angularjs

Question

Это легко сделать с JQuery:

var msgs = $(".messages ul") 

var scroll = false 

if(msgs[0].scrollHeight === (msgs.scrollTop() + msgs.outerHeight())) 
{ 

    scroll = true 

} 
$scope.messages.push(data) 
if(scroll) 
{ 

    setTimeout(function(){ 

     msgs.scrollTop(msgs[0].scrollHeight) // Allow it to update! 

    },0) 


} 

Чтобы дать некоторый контекст, ул является контейнером сообщений, я итерации по массиву в $scope.messages и если контейнер прокручивается до дна, он будет придерживаться дна. Эта реализация работает для меня.

Теперь я недавно узнал, как нельзя использовать jQuery в угловом режиме. Но мне интересно, как я могу достичь чего-то подобного в чистом AngularJS?

Answer 1

Вы можете создать директиву, которая будет иметь переменную, которая, когда true вернется в верхнюю часть, и установит себя как false, а не сверху.

Как использовать:

<div scroll-to-top="isAtTop"> 
    <li ng-repeat="stuff in items">{{stuff}} 
    <a ng-click="isAtTop = true">Scroll to Top</a> 
</div> 

Вот директива (не проверял, но должно работать):

angular.module('myApp').directive('scrollToTop', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, elm, attr) { 
     var isTop; 
     //bind changes from scope to our view: set isTop variable 
     //depending on what scope variable is. If scope value 
     //changes to true and we aren't at top, go to top 
     scope.$watch(attr.scrollToTop, function(newValue) { 
     newValue = !!newValue; //to boolean 
     if (!isTop && newValue) { 
      elm[0].scrollTo(0,0); 
     } 
     isTop = newValue; 
     }); 

     //If we are at top and we scroll down, set isTop and 
     //our variable on scope to false. 
     elm.bind('scroll', function() { 
     if (elm[0].scrollTop !==0 && isTop) { 
      //Use $apply to tell angular 
      //'hey, we are gonna change something from outside angular' 
      scope.$apply(function() { 
      //(we should use $parse service here, but simple for example) 
      scope[attr.scrollTop] = false; 
      isTop = false; 
      }); 
     } 
     }); 

    } 
    }; 
}); 

Answer 2

простое решение я видел:

$location.hash('focus'); 

// call $ anchorScroll() $ anchorScroll();

Answer 3

Я столкнулся с той же проблемой, что и прокрутка стола. Я решил это следующим образом.

Вот мой пример html.

<table id="rateplanmapping-scroll"> 
    <thead> 
     <th></th>.... 
    </thead> 
    <tbody > 
     <tr ng-repeat="data in datas"> //this is the data 
      <td></td>..... 
     </tr> 
    </tbody> 
</table> 

Вот угловой код для перехода к началу

angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0; 

Я надеюсь, что это помогает. Вы можете поместить этот скрипт в нужную функцию, , поэтому, когда происходят определенные события, он автоматически запускается. Или может быть прикреплен к событию также. Надеюсь, это поможет.

Для сНа элемента это может быть сделано следующим способом

http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview

Answer 4

Это также работает $anchorScroll. Пример

<div ng-controller="ScrollController"> 
    <a ng-click="gotoBottom()">Go to bottom</a> 
    <a id="bottom"></a> You're at the bottom! 
</div> 

ЯШ: -

.controller(function($scope, $location, $anchorScroll) { 
    $scope.gotoBottom = function() { 
     // set the location.hash to the id of 
     // the element you wish to scroll to. 
     $location.hash('bottom'); 

     // call $anchorScroll() 
     $anchorScroll(); 
    }; 
})