为什么我的对象在Angular视图中没有更新？

Question

I have SignalR working in my application:

app.run(['SignalRService', function (SignalRService) {}]);

SignalRService:

app.service("SignalRService",  ['$rootScope', function ($rootScope) {
    var masterdataChangerHub = $.connection.progressHub;

    if (masterdataChangerHub != undefined) {
        masterdataChangerHub.client.updateProgress = function (progress) {
            $rootScope.$broadcast('progressChanged', progress);
        }

        masterdataChangerHub.client.completed = function (result) {
            $rootScope.$broadcast('taskCompleted', result);
        }
    }

    $.connection.hub.start();
}]);

As you can see I throw an event when a SignalR method gets invoked. This all works fine. However, on 1 directive, my data won't get updated. Here's the code:

app.directive('certificateDetails', ['CertificateService', 'TradeDaysService', 'DateFactory', function (CertificateService, TradeDaysService, DateFactory) {
    return {
        restrict: 'E',
        templateUrl: '/Certificate/Details',
        scope: {
            certificateId: '=',
            visible: '=',
            certificate: '=',
            certificateSaved: '&'
        },
        link: function (scope, element, attributes) {
            scope.certificateFormVisible = false;
            scope.showCancelDialog = false;
            scope.splitCertificateFormVisible = false;
            scope.partialPayoutFormVisible = false;

            scope.$on("taskCompleted", function (evt, response) {
                console.log(response);

                    CertificateService.getCertificateById(scope.certificate.Id).then(function (response) {
                        scope.certificate = response;
                    });

            });

            scope.$watch('visible', function (newVal) {
                if (newVal === true) {
                    scope.showButtonBar = attributes.showButtonBar || true;

                    if (scope.certificateId) {
                        getCertificateById();
                    }
                }
            });

            function getCertificateById() {
                CertificateService.getCertificateById(scope.certificateId).then(function (response) {
                    scope.certificate = response;
                });
            };
        }
    }
}]);

The weird thing is, when I have my console open (I use Chrome) on the network tab, I can see that the directive makes a request to the right URL with the right parameters. Also, when the console is open, my data is updated in the view. However, and this is the strange part, when I close the console, nothing happens! It doesn't update the view..

I have also tried to put the code inside the taskCompleted event in a $timeout but that doesn't work either.

Could someone explain why this happens and how to solve this problem?

EDIT I

This is how the getCertificateById looks like in my CertificateService

this.getCertificateById = function (id) {
    var promise = $http.post('/Certificate/GetById?id=' + id).then(function (response) {
        return response.data;
    });

    return promise;
};

Answer 1

Handling SignalR events will execute out of the Angular context. You will need to $apply in order to force digest for these to work. I'd try to call $apply on $rootScope after the $broadcast :

var masterdataChangerHub = $.connection.progressHub;

if (masterdataChangerHub != undefined) {
    masterdataChangerHub.client.updateProgress = function (progress) {
        $rootScope.$broadcast('progressChanged', progress);
        $rootScope.$apply();
    }

    masterdataChangerHub.client.completed = function (result) {
        $rootScope.$broadcast('taskCompleted', result);
        $rootScope.$apply();
    }
}

If this works then the issue definitely a binding issue between SignalR and Angular. Depending on what browser plugins you have installed, having the console open could trigger a digest for you.

On the sample listeners for this project (that binds SignalR and Angular) , you can see that a $rootScope.$apply() is needed after handling on the client side:

//client side methods
listeners:{
    'lockEmployee': function (id) {
        var employee = find(id);
        employee.Locked = true;
        $rootScope.$apply();
    },
    'unlockEmployee': function (id) {
        var employee = find(id);
        employee.Locked = false;
        $rootScope.$apply();
    }
}

So, I'd assume that you would need to do the same.