Question

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

(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

在 xyzFunc 之外定义$ scope变量，绑定此变量，然后从$ http回调中设置它的值。由于您使用了角度$ 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);

});

Answer 2

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

尝试在viewAll.widget = data;

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

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

如果效果很好，请告诉我。

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

2 个答案: