3

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

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

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

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

编辑评论：

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

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

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

4

2 回答 2

5

我写了这个例子：http: //jsfiddle.net/risabh/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/risabh/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();}],
于 2013-07-24T18:22:14.317 回答
0

这是我要去的地方的一个非常复杂的版本：

    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: "@"
    } 
}
于 2013-07-25T12:47:28.907 回答