Question

我正在编写自己的聊天界面，以帮助我更好地理解angularJs和socket.io。

我的聊天窗口已修复，溢出设置为自动。我使用以下指令来操作DOM进行滚动，这样当每条消息被推送到模型数组时，它将在窗口底部可见。

app.directive('plnkScroll', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
              angular.element(element)[0].scrollIntoView();
        }
    };
}]);

从理论上讲，这是有效的。但是，如果消息足够长以占用多行，则它不会滚动，以便整条线清晰可见。

这是因为正在对DOM执行scrollIntoView方法，而尚未评估角度表达式（在本例中为{{item.text}}）

在评估Angular表达式并将模型数据注入DOM后，是否可以执行此函数？

这是我的plunker，以帮助说明我在做什么。

P.S。使用jQuery不是我的选择，我想做“角度方式”的事情。

Answer 1

你可以使用$ timeout在指令元素追加到父级之后执行你的代码。

app.directive('plnkScroll', ['$timeout',function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
              $timeout(function(){
                angular.element(element)[0].scrollIntoView();
              },50);
            }
        };
    }]);

Answer 2

为了扩展Kain的响应，它实际上没有指定超时的任意毫秒数。通过$timeout发生的Simply allowing a digest cycle就足够了。您可以通过省略$timeout函数which defaults to zero的第二个参数来完成此操作。

或者，如果您希望滚动基于范围变量更改而发生，您可以指定要使用scope.$watch观看的指令的属性，并在手表触发时滚动。

在指令的内容加载到页面后，如何操作DOM？

2 个答案: