AngularJS: DOM 변경을 적용한 후 요소의 끝까지 스크롤합니다.

AngularJS: DOM 변경을 적용한 후 요소의 끝까지 스크롤합니다.

간단한 리스트가 있습니다.항목을 추가할 때마다 항목을 표시하는 요소의 맨 아래까지 스크롤할 수 있기를 원합니다.나는 그 끝자락에 걸 수 있는 방법이 없다는 것을 이해했다.$apply()어떤 솔루션을 사용할 수 있을까요?

여기 내 문제를 설명하는 jsfiddle이 있습니다. 아이템을 충분히 추가한 후 ul 요소가 아래로 스크롤되지 않습니다.

angularjs-scroll-glue가 준비되어 있어 원하는 대로 사용할 수 있습니다.

필요한 것은, 다음의 조작을 실시하는 것 뿐입니다.scroll-glue컨테이너 요소에 지시하면 원하는 것을 얻을 수 있습니다.

데모도 준비되어 있습니다.

이에 대한 또 다른 유효한 해결책은$timeout. 타임아웃 값 0을 사용하면 angular는 전달된 함수를 호출하기 전에 DOM이 렌더링될 때까지 기다립니다.$timeout따라서 목록에 요소를 추가한 후 아래로 스크롤하기 전에 새 요소가 DOM에 추가되기를 기다릴 수 있습니다.

@Mark Coleman의 솔루션과 마찬가지로 외부 라이브러리를 추가할 필요가 없습니다.

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $timeout) {
  $scope.list = ["item 1", "item 2", "item 3", "item 4", "item 5"];
  $scope.add = function() {
    $scope.list.push("new item");
    $timeout(function() {
      var scroller = document.getElementById("autoscroll");
      scroller.scrollTop = scroller.scrollHeight;
    }, 0, false);
  }
}

ul {
  height: 150px;
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <button ng-click="add()">Add</button>
    <ul id="autoscroll">
      <li ng-repeat="item in list">{{item}}</li>
    </ul>
  </div>
</div>

간단한 작업 예(플러그인이나 지시문 불필요)...

.controller('Controller', function($scope, $anchorScroll, $location, $timeout) {

  $scope.func = function(data) {

    // some data appending here...

    $timeout(function() {
      $location.hash('end');
      $anchorScroll();
    })
  }

})

anchorScroll 명령어를 anchorScroll 명령어로 감싸는 것이 제 요령입니다.$timeout그러면 스코프가 해결되어 자동으로 페이지 끝에 있는 요소로 이동됩니다.

클릭 핸들러를 바인드하는 간단한 지시문을 작성할 수 있습니다.<ul>매번 바닥으로 떨어집니다.

myApp.directive("scrollBottom", function(){
    return {
        link: function(scope, element, attr){
            var $id= $("#" + attr.scrollBottom);
            $(element).on("click", function(){
                $id.scrollTop($id[0].scrollHeight);
            });
        }
    }
});

jsfiddle의 예

AnchorScroll을 사용할 수 있습니다.다음 매뉴얼을 참조하십시오.https://docs.angularjs.org/api/ng/service/$anchorScroll

이를 위해서는 angularjs 커스텀디렉토리를 사용합니다.

예:

<ul style="overflow: auto; max-height: 160px;" id="promptAnswerBlock">

<li ng-repeat="obj in objectKist track by $index" on-finish-render="ngRepeatFinished">                                              

  app.directive('onFinishRender', function($timeout) {
    return {
        restrict : 'A',
        link : function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    $('#promptAnswerBlock').scrollTop($('#promptAnswerBlock')[0].scrollHeight + 150);
                });
            }
          }
        }
    }); 

</li>

언급URL : https://stackoverflow.com/questions/17296837/angularjs-scroll-to-end-of-element-after-applying-dom-changes