任何人都可以提供一个angularjs设置示例,它可以轮询数据并在收到数据时更新UI吗？

Question

苦苦挣扎为一个很好的例子.

我想要一个图表指令,通过轮询Web服务每分钟更新一次.

我目前有一个服务,它是我的Web服务的包装器.我的控制器可以访问此服务并成功填充模板.我还创建了一个可以显示静态数据的图表指令.我现在希望能够在同一页面上实时更新此图表指令以及可能的多个图表.轮询逻辑是否应该在指令范围内？我希望每个图表能够以不同的间隔进行轮询.

当然可以理解一个简化的例子.

编辑评论:

我希望能够像这样添加我的指令:

<chart pollingperiod="12" param1="somevalue" param2="somevalue"></chart> 

我认为这意味着我的指令必须承担轮询的责任,或者以某种方式将这些参数传递给控制器​​以设置轮询.

Answer 1

我写了这个例子:http://jsfiddle.net/rishabh/Kuewm/

在声明散列时,您可以在指令范围内使用'='进行双向数据绑定.

scope : {
          value : '='  // '=' indicates 2 way binding
        }

现在,您需要单独更新控制器中每个图表的数据,并在视图/指令中更新它们.

现在您可以使用$ timeout来轮询您的服务,如下所示: -

$scope.chartValue = /*service call to init */;
var poll = function() {
   $timeout(function() {
      /* service call to update chartValue */
      poll();
   }, 1000);
};     
poll();

这将在1000毫秒后更新您的chartValue.您可以为不同的图表使用不同的值.

编辑:这是小提琴http://jsfiddle.net/rishabh/76sKy/

您可以传递该值并在指令控制器中更新它们.

scope : {
            pollingperiod : '@',
            param1 : '@',
            param2 : '@'
        },
controller: ['$scope', '$element', '$attrs', '$transclude', '$timeout', 
             function($scope, $element, $attrs, $transclude, $timeout) {
                 var poll = function() {
                     $timeout(function() {
                         //update your chart
                         $scope.param1 = $scope.param2;
                         $scope.param2++ ;
                         poll();
                     }, 100*$scope.pollingperiod);
                 };     
                 poll();}],