AngularJs双方向データバインディングがSignalRライブラリを追加すると動作しない

Question

AngularJsプロジェクトにライブラリSignalRを追加しようとしたときに問題が発生しました。なぜデータフローが正常に機能しなくなったのかわかりませんが、配列にオブジェクトを挿入しようとすると、表示されませんが、別のオブジェクトを追加しようとすると、最初のオブジェクトが表示されます。 3番目のオブジェクトを追加するには2番目のオブジェクトしか表示されません。

編集：角度コントローラのすべてのコード。

app.controller('HomeCtrl', ['$scope', 'HttpSrv', '$state', function ($scope, HttpSrv, $state) { 
$scope.messages = []; 

activate(); 

function activate() { 
    if (HttpSrv.CheckToken()) { 
     loadPage(); 
    } 
}; 

$scope.$on("$destroy", function() { 
    con.stop(); 
}); 

function connectToChat() { 

    HttpSrv.http('GET', 'home/GetChatToken').then(function (res) { 
     localStorage.setItem('ChatToken', res.Result); 
     con.start({ jsonp: true }, function() { console.log('Start'); }); 
    }); 
} 



var con = $.hubConnection("http://localhost:4704/"); 
var hub = con.createHubProxy('ChatHub'); 

hub.on('fail', function (res) { 
    console.error(res); 
}); 

hub.on('addMessage', addMessage); 

$scope.trySend = function() { 
    hub.invoke('SendMessage', localStorage.getItem('ChatToken'), document.getElementById('messageBox').value); 
}; 

function addMessage(name, message, elementId) { 
    var tempMessage = '<li id="' + elementId + '" class="right clearfix"><div class="chat-body clearfix">' 
    tempMessage += '<div class="header"><strong class="pull-left primary-font">' + name + ': </strong> <br />' 
    tempMessage += '</div><p>' + message + '</p></div></li>' 

    document.getElementById('chatBody').innerHTML += tempMessage; 
    document.getElementById('messageBox').value = ''; 
    document.getElementById(elementId).scrollIntoView(); 
    document.getElementById('chatBody').focus(); 
} 

function loadPage() { 
    HttpSrv.http('GET', 'home/get').then(function (res) { 
     //console.log(res); 
     if (res.Status == 200 && res.Succeeded) { 
      connectToChat(); 
      for (var i = 0; i < res.ListResult.length; i++) { 
       res.ListResult[i].CreateDate = res.ListResult[i].CreateDate.replace('T', ' ').slice(0, 19); 
      } 
      $scope.newsList = res.ListResult; 

     } 
    }); 
};}]); 

（私は問題のためのdocument.getElementByIdを使用）

Answer 1

まず、あなたのコード内のマークアップを構築すべきではありません。単にメッセージをリストに追加して、マークアップでng-repeatを使用します。

ただし、signalRからのメッセージを処理するときは、$ scope。$ apply（）または$ scope。$ digest（）も使用する必要があります。

function addMessage(name, message, elementId) { 
    $scope.$apply(function(){ 
     $scope.messages.push(message); 
    }); 
}