从Web套接字动态更新模型

时间:2016-07-21 18:15:26

标签: javascript angularjs

更新(高级理念/概念)

总结一下,我希望在控制器中动态更新值,该控制器绑定到Web Socket服务,该值更改。以下是我如何解决问题的尝试以及我所面临的障碍。

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

虽然控制器内的健康值永远不会更新,但我却不知道我做错了什么。以下是相关代码的片段。

这是控制器

(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 使用$ scope。例如以下question

中接受的答案

谢谢

1 个答案:

答案 0 :(得分:1)

AFAIK,您需要关注服务变量。这就是我为此而努力的方法:

  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