AngularJS Controller在后端数据更改时自动更新$ scope

时间:2014-11-08 12:55:51

标签: javascript json angularjs api rest

我有一个服务,它使用$ http来“获取”来自REST API的一些JSON数据。 Controller使用服务获取此数据并在$ scope中初始化它。我怎样才能使每次JSON API更改时更改$ scope中的更改,从而更新视图?

控制器:

app.controller('MainController', function ($scope, BuildService) {
    init();
    function init() {
        BuildService.getBuilds().then(function() {
            $scope.builds = BuildService.data();
        });
    }
});

服务:

app.service('BuildService', function ($http, $q) {

    var BuildService = {}; 

    var deffered = $q.defer();
    var data = [];  

    BuildService.getBuilds = function () {
        //return builds;

        $http.get('/api').
          success(function(d, status, headers, config) {
            // this callback will be called asynchronously
            // when the response is available
            data = d;
            deffered.resolve();

          }).
          error(function(d, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            deffered.reject();
          });

          return deffered.promise;

    };

    BuildService.data = function() { return data; };

    return BuildService;

});

2 个答案:

答案 0 :(得分:3)

这个问题不是AngularJS特有的。你想要实现的是一个实时应用程序。

方法1:轮询

使用$interval每隔30秒左右检查一次JSON API。

方法2:基于WebSocket的通知

如果您可以控制JSON API,则可以创建另一个基于WebSocket的通知API。每当JSON API更改时,通知客户端再次获取JSON API。

答案 1 :(得分:0)

我说你真的有太多不必要的逻辑。保持简单,就这样。如果要重用GET,可以使用getBuilds控制器方法执行此操作。

app.controller('MainController', function ($scope, $http, BuildService) {
    init();
    function init() {
        $http.get('/api').
            success(function(data) {
                $scope.builds = data;
            });
    }
});