添加 SignalR 库时，AngularJs 双向数据绑定不起作用答案

【问题标题】：AngularJs two way data binding doesn't work when add SignalR lib添加 SignalR 库时，AngularJs 双向数据绑定不起作用
【发布时间】：2016-12-19 03:24:26
【问题描述】：

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

编辑：角度控制器中的所有代码。

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）

【问题讨论】：

能否请您提供代码，或者至少提供一个 MCVE (stackoverflow.com/help/mcve)？
我已经更新了帖子
所以这是你的工作，但原始问题的代码在哪里？

标签： javascript angularjs signalr

【解决方案1】：

首先，您不应该在代码中构建标记。只需将消息添加到列表中并在标记中使用 ng-repeat。

但是，您还必须确保在处理来自 signalR 的消息时使用 $scope.$apply() 或 $scope.$digest()。

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

【讨论】：