当signalr集线器推送新消息时，角不能更新集合

Question

这是一个网站，用户可以通过浏览器控制设备。浏览器与中间线之间的通信是通过signalr进行的。这里的问题是:当从signalr收到新消息时，我将数据重新绑定到集合，但是页面没有刷新。

以下是指令：

//主框架
app.directive('mainPart',['$compile',function ($compile) {
return {
    restrict: 'AE',
    replace: true,
    scope: { options: "=" },
    link: function(scope, element, attrs) {
        scope.$watchCollection('options', function (newValue, oldValue) {
                console.log("I see a data change!");
        });
    },
    template: '<div class="panel panel-info" style="margin:10px 10px 10px 10px">'
            + '  <div class="panel-heading">'
            + '    <h3 class="panel-title glyphicon glyphicon-user"><strong>{{options.title}}</strong></h3>'
            + '  </div>'
            + '  <div class="panel-body">'
            + '    <controller-part options="options.controller"></controller-part>'
            + '    <led-part options="options.led"></led-part>'
            + '  </div>'
            + '</div>'
};
}]);

//可控制的控制器部分
app.directive('controllerPart', function () {
return {
    restrict: 'AE',
    replace: true,
    scope: { options: "=options" },
    template: '<div class="panel panel-default">'
            + '  <div class="panel-heading">'
            + '    <h3 class="panel-title">控制器部分</h3>'
            + '  </div>'
            + '  <div class="panel-body">'
            + '    <controller-instance options="options"></controller-instance>'
            + '  </div>'
            + '</div>'
};
});

//不可控制的指示灯部分
app.directive('ledPart', function () {
return {
    restrict: 'AE',
    replace: true,
    scope: { options: "=options" },
    template: '<div class="panel panel-default">'
            + '  <div class="panel-heading">'
            + '    <h3 class="panel-title">指示灯部分</h3>'
            + '  </div>'
            + '  <div class="panel-body">'
            + '    <led-instance options="options"></led-instance>'
            + '  </div>'
            + '</div>'
};
});

//控制器具体的路数
app.directive('controllerInstance', function () {
return {
    restrict: 'AE',
    replace: true,
    scope: { options: "=options" },
    template: '<div class="panel panel-success" style="float:left;margin-left:20px;" ng-repeat="controller in options">'
             + '   <div class="panel-heading">'
             + '       <h3 class="panel-title">{{controller.title}}(在线)</h3>'
             + '   </div>'
             + '   <div class="panel-body">'
             + '       <div class="btn-group" role="group">'
             + '           <button type="button"  ng-repeat="function in controller.functionlist" tag="{{function.functionorder}}" class="btn {{function.state|onlineConverter}} glyphicon {{function.functionicon}}">{{function.functionname}}</button>'
             //+ '           <button type="button" class="btn btn-default glyphicon glyphicon-off">停止</button>'
             //+ '           <button type="button" class="btn btn-default glyphicon glyphicon-chevron-up btn-success">正转</button>'
             //+ '           <button type="button" class="btn btn-default glyphicon glyphicon-chevron-down">反转</button>'
             + '       </div>'
             + '   </div>'
             + '</div>'
};
});

//指示器具体的路数
app.directive('ledInstance', function () {
return {
    restrict: 'AE',
    replace: true,
    scope: { options: "=options" },
    template: '<div class="panel panel-success" style="float:left;margin-left:20px;" ng-repeat="led in options">'
            + '  <div class="panel-heading">'
            + '     <h3 class="panel-title">{{led.title}}(在线)</h3>'
            + '  </div>'
            + '  <div class="panel-body">'
            + '     <div class="btn-group" role="group">'
            + '         <button type="button"  ng-repeat="function in led.functionlist" tag="{{function.functionorder}}" class="btn {{function.state|onlineConverter}} glyphicon {{function.functionicon}}">{{function.functionname}}</button>'
            //+ '         <button type="button" class="btn btn-success glyphicon glyphicon-eye-close">灭</button>'
            //+ '         <button type="button" class="btn btn-default glyphicon glyphicon-eye-open">亮</button>'
            + '     </div>'
            + ' </div>'
            + '</div>'
};
});

//此过滤器主要是为了过滤工作状态的，将true和false转变为具体的css样式。
app.filter('onlineConverter', function () {
return function (input) {
    if (input) {
        return "btn-success";
    }
    else {
        return "btn-default";
    }
}
});

以下是服务部分：

app.service('dataService', function () {
var getData = function () {
    /*
    数据结构中的state代表当前路是否是工作状态
    */
    var controllerData =
        {
            title: '中国联通对接设备',
            controller: [{
                title: '风机',
                functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: true }, { functionname: '正转', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: false }, { functionname: '反转', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: false }]
            }, {
                title: '湿帘',
                functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: false }, { functionname: '正转', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: false }, { functionname: '反转', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: true }]
            }, {
                title: '暖灯',
                functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: false }, { functionname: '高光', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: true }, { functionname: '低光', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: false }]
            }],
            led: [{
                title: '电源',
                functionlist: [{ functionname: '灭', functionicon: 'glyphicon-eye-close', functionorder: '0', state: false }, { functionname: '亮', functionicon: 'glyphicon-eye-open', functionorder: '1', state: true }]
            }, {
                title: '转轴',
                functionlist: [{ functionname: '正转', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '反转', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
            }, {
                title: '浇灌',
                functionlist: [{ functionname: '关闭', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '打开', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
            }, {
                title: '电压',
                functionlist: [{ functionname: '正常', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '异常', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
            }]
        };

    return controllerData;
}

return {
    controllerData: getData,
};
});

app.service('hubService', ['dataService', function (dataService) {

//添加对自动生成的Hub的引用
var chat = $.connection.chatHub;

//启动链接
$.connection.hub.start().done(function () { });

var getData = function () {
    return dataService.controllerData();
}

return {
    commandReceived: function(callback)
    {
        if(callback)
        {
            //调用Hub的callback回调方法
            chat.client.printCommand = function (command) {
                var data = getData();
                var obj = { data: data, command: command };
                return callback(obj);
            }
        }
    },
    controllerData:getData
};

])；

以下是控制器部分：

var mainController = app.controller('dsController', ['$scope', 'hubService', function ($scope, hubService) {

var currentData = hubService.controllerData();

$scope.controllerData = currentData;

hubService.commandReceived(function (result) {
    debugger;

    var command = result.command;
    var data = result.data;

    if (command != undefined) {
        if (command.localeCompare("aaaa")==0)
            data.controller[1].title = "哈哈哈";
        else if (command.localeCompare("bbbb") == 0)
            data.controller[0].title = "呵呵呵";
    }

    $scope.controllerData = data;
});

}]);

下面是屏幕截图：

​

当到达新消息时，我可以看到触发了hubService.commandReceived，然后重新绑定数据到集合。下面是屏幕截图：

​

但是问题是，在重新绑定数据之后，页面一点也不改变！

我检查了许多关于堆栈溢出的文章，似乎通过在指令中添加链接函数解决了许多问题，所以我做到了。但这对我没用。

也许我认为这个问题应该放在我使用的指令中？还是我用来处理signalr回调消息的服务方法？

有人能帮我吗？

编辑:2015-12-28 22:06:01

为了沃尔特的回应，我会尝试一下，同时，希望你们能提供更多的建议。我会在网上等。又来了。

Answer 1

你需要打电话

 $scope.$apply(function {
     $scope.controllerData = data;
 })

要通知角，您的数据已经更改，因为来自signalR的通知超出了angularjs的作用域生命周期。

$apply()用于从角度框架外部以角执行一个表达式。(例如，来自浏览器DOM事件、setTimeout、XHR或第三方库)。因为我们调用的是角度框架，所以我们需要执行适当的范围生命周期来处理异常，执行相应的监视。

你可以在上面读这里

您还需要检查$digest在某些情况下是否正在进行，以避免接收错误。