AngularJS控制器在后端数据更改时自动更新$scope

AngularJS Controller to update $scope automatically when backend data changes

本文关键字：更新 scope 控制器 后端 数据 AngularJS      更新时间：2023-09-26

我有一个服务，它使用$http从REST API"获取"一些JSON数据。控制器使用服务来获取这些数据，并在$范围内对其进行初始化。如何使JSON API每次更改时，更改都会在$范围中更新，从而在视图中更新？

控制器：

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

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

方法1：轮询

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

方法2：基于WebSocket的通知

如果您可以控制JSON API，则可以创建另一个基于WebSocket的通知API。当JSON API发生变化时，通知客户端再次获取JSON API。

我想说你真的有太多不必要的逻辑。保持简单，就这样吧。如果您想重用GET，可以在getBuilds控制器方法中执行。

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