AngularJS: Scroll bis zum Ende des Elements nach dem Anwenden von DOM-Änderungen

Question

Ich habe eine einfache Liste von Elementen. Ich möchte in der Lage sein, bis zum Ende des Elements zu blättern, das die Elemente anzeigt, wenn ich weitere Elemente hinzufüge. Ich habe verstanden, dass es keine Möglichkeit gibt, bis zum Ende der $apply() Funktion zu haken, was könnte meine Lösung sein?

Hier ist ein jsfiddle, um mein Problem zu veranschaulichen. Nach dem Hinzufügen von genügend Elementen scrollt das ul-Element nicht nach unten ...

Answer 1

ist da noch die sehr geile angularjs-scroll-glue zur Verfügung, die genau das tut, was Sie wollen.

Sie müssen lediglich die Anweisung scroll-glue auf Ihr Containerelement anwenden, und Sie erhalten genau das, wonach Sie suchen.

Es ist auch eine demo verfügbar.

Answer 2

Sie könnten eine einfache Direktive erstellen, die einen Click-Handler bindet, der die <ul> jedes Mal nach unten scrollt.

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

example on jsfiddle

Answer 3

können Sie die AnchorScroll verwenden .. hier die Dokumentation: https://docs.angularjs.org/api/ng/service/$anchorScroll

Answer 4

Eine weitere gültige Lösung dieses Problems ist $timeout verwenden. Mit einem Zeitüberschreitungswert von 0 wartet eckig, bis das DOM gerendert wird, bevor die Funktion aufgerufen wird, die Sie an $timeout übergeben haben. Nachdem Sie der Liste ein Element hinzugefügt haben, können Sie damit warten, dass das neue Element zum DOM hinzugefügt wird, bevor Sie nach unten scrollen.

Wie @Mark Colemansolution, erfordert dies keine zusätzlichen externen Bibliotheken.

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>

Answer 5

Ein einfaches Ausführungsbeispiel (keine Notwendigkeit für Plugins oder Richtlinien) ...

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

    $scope.func = function(data) { 

    // some data appending here... 

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

}) 

Der Trick, der es tat, war für mich mit $timeout den anchorScroll Befehl Einwickeln, Auf diese Weise wurde der Bereich aufgelöst und automatisch zu einem Element am Ende der Seite verschoben.

Answer 6

Sie können dies mit dem benutzerdefinierten Verzeichnis angularjs erreichen.

Beispiel:

<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>