javascript - 添加 SignalR lib 时，AngularJs 两种方式数据绑定(bind)不起作用

Question

当我尝试在我的 AngularJs 项目中添加库 SignalR 时，我的问题就开始了。我不知道为什么，但数据流已停止正常工作，我的意思是，当我尝试将一个对象插入数组时，我看不到它，但是当我尝试添加另一个对象时，我看到第一个对象，当我尝试时添加第三个对象我只看到第二个。

编辑: Angular Controller 中的所有代码。

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);
    });
}