Двусторонняя привязка данных AngularJs не работает при добавлении SignalR lib

Question

Моя проблема началась, когда я попытался добавить библиотеку SignalR в мой проект AngularJs. Я не знаю, почему, но поток данных перестает работать должным образом, я имею в виду, что когда я пытаюсь вставить объект в массив, я его не вижу, но когда я пытаюсь добавить еще один, я вижу первый объект, и когда я пытаюсь для добавления третьего объекта я вижу только второй.

изменить: весь код в угловом контроллере.

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 в своей разметке.

Однако вы также должны убедиться, что используете $ scope. $ Apply() или $ scope. $ Digest() при обработке сообщений из signalR.