谁能提供一个 angularjs 设置的示例，该设置在收到数据时轮询数据并更新 UI？

Posted 2023-02-22

【中文标题】谁能提供一个 angularjs 设置的示例，该设置在收到数据时轮询数据并更新 UI？

【英文标题】：Can anyone provide an example of an angularjs set-up that polls for data and updates the UI when data is received?

【发布时间】：2013-07-23 21:50:57

【问题描述】：

努力寻找一个很好的例子。

我想要一个图表指令，通过轮询网络服务每分钟更新一次。

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

一个简化的例子当然会受到赞赏。

从评论中编辑：

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

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

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

【问题讨论】：

这就是我所做的：***.com/questions/14237070/…

不确定你的后端是什么，但如果是.NET，你可能想看看 SignalR @github.com/SignalR/SignalR

Signalr 绝对是一种选择，但目前我只是在寻找一种更天真的轮询方法，因为我正在掌握 Angular。不过，我可能更希望我的后端完全解耦，通过 REST API 提供所有数据。

感谢@Sharondio，这绝对帮助我继续前进。

【参考方案1】：

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

在声明哈希时，您可以在指令范围内使用 '=' 进行 2 路数据绑定。

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();],

【讨论】：

我不确定这种方法。这意味着对于每个新图表，如果我想要不同的轮询周期，我必须向控制器添加一个新部分。我希望能够像这样添加我的指令： 我认为这意味着我的指令必须承担轮询，或者以某种方式将这些参数传递给控制器​​以设置轮询。

@JMac ：我已经编辑了答案，并且编辑包含您要查找的内容。这种方法的唯一缺点是您不能使用不同的逻辑更新不同的图表。

谢谢。我会接受作为答案。我刚刚回过头来说我以几乎相同的方式得到它。

【参考方案2】：

这是一个非常复杂的版本：

    link: function($scope, element, attrs, controller)

        var count= 0;

        function updateChartData() 

        var poll = $timeout(function myFunction() 

                count++;
                $scope.output = "" + $scope.poll + ", " + count + ": " + Math.random();
                $scope.$apply();

                updateChartData();

        , $scope.poll * 1000); //timeout in milliseconds

        $scope.$on('$destroy', function(e)  $timeout.cancel(poll); );
        ;

        updateChartData();
    ,

    scope: 
        title: "@",
        poll: "@"