DOM已更新，但其视图未呈现？

Question

我正在尝试制作聊天应用程序。 我有一个函数，每当我得到一个新的msg将msg添加到范围内时它就会运行，因此它会被ng-repeat渲染。 功能如下：

var gotMsg = function(message) {
    var msg = message.message;
    var name = message.name
    console.log('scope.messages', $scope.msgCtrl.messages);
    $scope.msgCtrl.messages[name].push({
        message: msg,
        user: name
    });

    $scope.$digest();
    //scroll to bottom
    $ionicScrollDelegate.scrollBottom(true);

我收到的消息没问题，而且从运行＆＃39; ionic run android＆＃39;从chrome inspect看，我看到DOM已经使用正确插入的新msg进行更新。

然而！这些新消息未正确呈现。它只是白色或破碎。当我向上滚动聊天然后再回来时，它会显示出来。 可能是什么导致了这个？我已尝试使用/不使用$ digest / $ apply / $ timeout / $ eval.Async等。到目前为止，没有任何工作。有什么想法吗？

Answer 1

我找到了正确处理消息的方法。 基本上需要隐藏和显示一个DOM元素，它会强制“移动”到页面，以便重新呈现。 我发现元素HAS导致运动，并且不能成为隐藏元素。此外，它需要有一点延迟。 0ms不起作用。

$timeout(function() {

    var el = document.getElementsByClassName("nbsp")[0];
    el.style.display = 'none';

    $timeout(function() {
        el.style.display = 'block';
    }, 50);

}, 50);