1

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

我的聊天窗口是固定的，溢出设置为自动。我正在使用以下指令来操作 DOM 以滚动，以便在将每条消息推送到模型数组时，它将在窗口底部可见。

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

从理论上讲，这是可行的。但是，如果消息的长度足以占用多于一行，则它不会滚动以使整行都清晰可见。

这是因为该scrollIntoView方法正在 DOM 上执行，而角度表达式尚未计算（在这种情况下，{{item.text}}）

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

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

ps 使用 jQuery 对我来说不是一个选项，我想以“角度方式”做事。

4

2 回答 2

2

为了扩展 Kain 的响应，它实际上可以在没有为超时指定任意毫秒数的情况下工作。简单地允许通过进行消化循环$timeout就足够了。您可以通过省略$timeout函数的第二个参数来做到这一点，该参数默认为零。

或者，如果您希望滚动基于范围变量的变化发生，您可以为指令指定一个属性以scope.$watch在监视触发时使用和滚动进行监视。

于 2013-11-13T07:30:19.723 回答
2

您可以在指令元素附加到父项后使用 $timeout 执行您的代码。

app.directive('plnkScroll', ['$timeout',function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
              $timeout(function(){
                angular.element(element)[0].scrollIntoView();
              },50);
            }
        };
    }]);
于 2013-11-13T05:40:46.313 回答