视图不反映来自 $http.get 的数据（在 angularjs 控制器内）

Question

我正在使用 AngularJS 并且正在创建一个连接到视图的控制器。该控制器每 10 秒从服务器获取一次数据，其想法是 display/show 将数据发送到客户端。我的控制器如下所示。

(function() {

    var app = angular.module('clock-widget-directives', []);

    app.controller('ViewClockController', function($scope, $http, $interval){
        $scope.xyzFunc = function() {
            var viewAll = this;
            viewAll.widget = [];

            $http.get('/statistics/deviceClock').success(function(data) {
             {
                viewAll.widget = data;
                console.log(data);

                alert(  data[0].utctime + " " + data[0].timezone + " " + data[0].timezoneOffset + " " + data[0].summerTimeZone );
            });
        }

        $interval( function(){ $scope.xyzFunc();}, 10000);

    });

})();

使用上面的控制器，我想实现我的目标，但视图不显示数据。我已经完成了我的研究，一些文章说它需要 $apply 但因为我使用的是 $interval 而不是 javascript 方法 setInterval() 我不需要调用它。

你能告诉我上面的代码有什么问题吗？谢谢。

Answer 1

这是因为 angularJs 摘要周期在响应异步到达时已经完成，所以 angular 不会用新数据重新绘制视图。

尝试在 viewAll.widget = data;

之后的成功回调中使用以下代码

           if(!$scope.$$phase)
            {
                $scope.$digest();
            }

如果效果好请告诉我。

Answer 2

在 xyzFunc 之外定义一个 $scope 变量，绑定这个变量，然后从 $http 回调中设置它的值。由于您使用 angular 的 $http，您不必担心 apply.

添加了更好的可视化代码：

app.controller('ViewClockController', function($scope, $http, $interval){
    $scope.viewAll = this;
    $scope.viewAll.widget = [];
    $scope.xyzFunc = function(){    
        $http.get('/statistics/clock').success(function(data) {
            $scope.viewAll.widget = data;
        });
    }

    $interval( function(){ 
        $scope.xyzFunc();
    }, 10000);

});

视图不反映来自 $http.get 的数据（在 angularjs 控制器内）

View does not reflect the data from $http.get(inside an angularjs controller)

angularjs

angularjs-controller