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

Question

我正在尝试制作一个聊天应用程序。我有一个函数，每当我得到一个新的味精时就会运行，将味精添加到范围中，这样它就会被 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);

我收到的消息没问题，从运行 'ionic run android' 和 chrome 检查来看，我看到 DOM 已正确更新新消息插值。

但是！这些新消息未正确呈现。它要么是白色的，要么是破损的。当我向上滚动聊天并返回时，它确实会出现。是什么原因造成的？我试过 with/without $digest/$apply/$timeout/$eval.Async 等。到目前为止没有任何效果。有什么想法吗？

Answer 1

我找到了正确呈现消息的解决方法。基本上需要隐藏和显示 DOM 元素，该元素会强制 "movement" 到页面，以便重新呈现。我发现该元素必须引起运动，并且不能是隐藏元素。此外，它需要有一点延迟。 0ms 不行。

$timeout(function() {

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

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

}, 50);

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

DOM updated, but its view isn’t rendering?

javascript

angularjs

angularjs-ng-repeat

ionic-framework