如何滚动到底部或以角度将焦点移动到底部？答案

【问题标题】：how to scroll to bottom or move focus to bottom in angular?如何滚动到底部或以角度将焦点移动到底部？
【发布时间】：2014-08-17 06:12:40
【问题描述】：

我有一个 div，我在其中添加了元素。我想在 div 中添加元素时滚动到 div 的底部。我知道如何在 jquery 中执行。但我不知道如何使用 angular js 滚动

testCaseContainer 是 div 的 id。

 var elem = document.getElementById('testCaseContainer'); // just to
                                                                    // scroll down
                                                                    // the line
        elem.scrollTop = elem.scrollHeight;

我想知道如何使用 angular ？

http://plnkr.co/edit/M8tCL8Szc3h3FatFLycG?p=preview

我在 div 容器中添加了 css 以便它滚动。

.heightClass{
  height:100px;
  overflow :auto;
}

添加项目时如何在下方移动焦点..请发布您的答案..

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

这是您的解决方案。它对我有用。

模板

<div data-ng-controller="TestController">
    <button data-ng-click="AddNewItem()">Add New Item</button>
    <div class="heightClass" data-dr-scroll-to-bottom>
        <div data-ng-repeat="divItem in divList track by $index">
            {{divItem}}
        </div>
    </div>
</div>

控制器

app.controller("TestController", ["$scope", function ($scope) {

    $scope.divList = [1, 2];

    $scope.AddNewItem = function () {
        $scope.divList.push(3);
    };

}]);

指令你有两个选择。

听 DOMNodeInserted（不推荐使用。所以不要使用它。了解更多信息Listening to events such as adding new elements in JavaScript。为方便起见，我添加了代码。但不要使用此代码。使用选项 2）。

app.directive("drScrollToBottom", function() {

var linkFunction = function(scope, iElement, iAttrs) { iElement.bind("DOMNodeInserted", function() { console.log(iElement.prop("scrollHeight")); iElement.scrollTop(iElement.prop("scrollHeight")); }); };

返回 { 限制：“A”，链接：链接功能 } });

使用到达.js（可以在这里找到https://github.com/uzairfarooq/arrive/）

app.directive("drScrollToBottom", function () {

var linkFunction = function (scope, iElement, iAttrs) {
    iElement.arrive("div", function () {
        console.log(iElement.prop("scrollHeight"));
        iElement.scrollTop(iElement.prop("scrollHeight"));
    });
};

return {
    restrict: "A",
    link: linkFunction
}

});

【讨论】：

【解决方案2】：

下面是滚动到页面底部的指令

csapp.directive('csScrollTop', ["$window", function ($window) {
    var linkFunction = function (scope) {
        scope.$on("$locationChangeSuccess", function () {
            $window.scrollTo(0, document.body.scrollHeight);
            //$("html, body").animate({ scrollTop: 0 }, "fast");
        });
    };

    return {
        restrict: 'E',
        link: linkFunction
    };
}]);

【讨论】：

你能分享 plunker 吗？项目已添加