Question

我有一个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;
}

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

Answer 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（＆＃34; drScrollToBottom＆＃34;，function（）{

var linkFunction = function（scope，iElement，iAttrs）{ iElement.bind（＆＃34; DOMNodeInserted＆＃34;，function（）{ 的console.log（iElement.prop（＆＃34; scrollHeight属性＆＃34））; iElement.scrollTop（iElement.prop（＆＃34; scrollHeight属性＆＃34））; }）; };

返回{ 限制：＆＃34; A＆＃34;，链接：linkFunction } }）;

使用arri.js （可在此处找到https://github.com/uzairfarooq/arrive/）

app.directive（＆＃34; drScrollToBottom＆＃34;，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
}

}）;

Answer 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
    };
}]);

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

2 个答案: