javascript - 从 Web Socket 动态更新模型

Question

更新(高级想法/概念)

总而言之，我希望在绑定(bind)到 Web 套接字服务的 Controller 中动态更新值，该值会发生变化。以下是我尝试如何解决我面临的问题和障碍。

---

每次套接字在服务中推送信息时，我想更新 Controller 中的 View 模型。为了模拟消息的推送，我只是每秒调用一次超时，这反过来又增加了服务中的健康值，我在控制台中验证了它的工作原理。

虽然 Controller 中的健康值永远不会更新，但我不知道自己做错了什么。以下是相关代码片段。

这是 Controller

(function () {
    'use strict';
    angular
        .module('xxx')
        .controller('DashboardController', ['$scope','$timeout', "$uibModal", "dashboardService", "syncService", DashboardController]);

    function DashboardController($scope, $timeout, $uibModal, dashboardService, syncService) {
        var vm = this;

        // VERSIONS
        vm.versions = {};

        // HEALTH
        vm.health= syncService.health;

        // JUMP-START
        activate();

        //////////////

        function activate(){
           getVersions();
        }

        function getVersions(){
            dashboardService.getVersions()
                         .then(function(data) {
                            vm.versions = data;
                            return vm.versions;
                         });
        }

    }
})();

这是服务

    (function () {
        'use strict';
        angular
            .module('xxx')
            .service('syncService',['$timeout', syncService]);

        function syncService($timeout) {
            //Init WebSocket
            var self = this;
            self.health= 0;
            updatedStatus();
            ///////////

            ....

        function updatedStatus(){
            $timeout(updatedStatus, 1000);
            self.health += 1;
            $timeout(angular.noop);   
        };
    }
})(); 

---

更新

---

我想知道如何不使用 $scope 让它工作。示例类似于以下接受的答案 question

谢谢

Answer 1

据我所知，您需要监视服务变量。这就是我为让它工作所做的:

  function DashboardController($scope, $timeout, $uibModal, dashboardService, syncService) {
    var vm = this;

    // VERSIONS
    vm.versions = {};

    // HEALTH
     vm.syncService = syncService;

     $scope.$watch('vm.syncService.health', function(newHealth, oldHealth){
        vm.health = newHealth;
     })

    // JUMP-START
    activate();

    //////////////

    function activate(){
       getVersions();
    }

    function getVersions(){
        dashboardService.getVersions()
                     .then(function(data) {
                        vm.versions = data;
                        return vm.versions;
                     });
    }

}

我在评论中链接了一个类似的问题，在他们也谈论使用 $broadcast 的答案中如果您需要多个 Controller 来了解服务中变量值的任何更改。