我该如何操作DOM我的指令的内容加载页面后？ [英] How can I manipulate the DOM after my directive's content has been loaded on the page?

问题描述

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

I am writing my own chat interface, to help me better understand angularJs and socket.io.

我的聊天窗口是固定的，具有溢出设置为自动。我使用下面的指令操作DOM中滚动，从而当每个消息被压入模型阵列，这将是在窗口的底部可见。

My chat window is fixed, with overflow set to auto. I am using the following directive to manipulate the DOM to scroll, so that as each message is pushed onto the model array, it will be visible at the bottom of the window.

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

在理论上，这个工程。然而，如果消息是足够长，以占用一个以上的线，就不会滚动，使整个线路清晰可见。

In theory, this works. However, if the message is long enough to take up more than one line, it does not scroll so that the entire line is clearly visible.

这是因为正在了DOM执行的 scrollIntoView 法而角前pression尚未进行评估（在这种情况下， {{} item.text} ）

This is because the scrollIntoView method is being executed on the DOM while the angular expression has yet to be evaluated (in this case, {{item.text}})

是否可以执行此功能的之后的角的前pression进行了评估和模型数据已经注入到DOM？

Is it possible to execute this function after the Angular expression has been evaluated and the model data has been injected into the DOM?

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

here is my plunker, to help illustrate what I am doing.

P.S。使用jQuery是不是我的选择，我喜欢做的事情角方式。

p.s. using jQuery is not an option for me, I would like to do things "the angular way".

推荐答案

您可以用$超时指令元素后EXCUTE您code附加到父。

your can use $timeout excute your code after directive element append to parent.

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

这篇关于我该如何操作DOM我的指令的内容加载页面后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！