javascript - 为什么我的对象没有在 Angular View 中更新？

Question

我的应用程序中有 SignalR 工作:

app.run(['SignalRService', function (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();
}]);

如您所见，当调用 SignalR 方法时，我会抛出一个事件。这一切都很好。但是，根据 1 条指令，我的数据不会更新。代码如下:

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

奇怪的是，当我在网络选项卡上打开控制台(我使用 Chrome)时，我可以看到该指令使用正确的参数向正确的 URL 发出请求。此外，当控制台打开时，我的数据会在 View 中更新。然而，这是奇怪的部分，当我关闭控制台时，什么也没有发生!它不会更新 View ..

我还尝试将代码放入 $timeout 的 taskCompleted 事件中，但这也不起作用。

有人可以解释一下为什么会发生这种情况以及如何解决这个问题吗？

编辑我

这就是 getCertificateById 在我的 CertificateService 中的样子

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

    return promise;
};

Answer 1

处理 SignalR 事件将在 Angular 上下文之外执行。您将需要 $apply 来强制摘要使这些工作。我会尝试在 $broadcast 之后调用 $rootScope 上的 $apply:

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

如果这有效，那么这个问题肯定是 SignalR 和 Angular 之间的绑定(bind)问题。根据您安装的浏览器插件，打开控制台可能会为您触发摘要。

关于 this project (that binds SignalR and Angular) 的示例监听器，可以看到在客户端处理后还需要一个$rootScope.$apply():

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

所以，我认为您也需要这样做。