Struggling for a good example of this.

I'm want to have a chart directive that will be updated every minute by polling a web service.

I currently have a service which is a wrapper for my web service. My controller can access this service and populate templates successfully. I have also created a chart directive which can display static data. I now want to make it possible for real time updating of this chart directive and potentially multiple charts on the same page. Should the polling logic therefore be inside the directive? I want every chart to be able to poll at different intervals.

A simplified example would of course be appreciated.

EDIT FROM COMMENT:

I would prefer to be able to add my directive like so:

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

I think this would mean my directive would have to take the responsibility of the polling, or somehow pass these parameters to the controller to set up the polling.

Struggling for a good example of this.

I'm want to have a chart directive that will be updated every minute by polling a web service.

I currently have a service which is a wrapper for my web service. My controller can access this service and populate templates successfully. I have also created a chart directive which can display static data. I now want to make it possible for real time updating of this chart directive and potentially multiple charts on the same page. Should the polling logic therefore be inside the directive? I want every chart to be able to poll at different intervals.

A simplified example would of course be appreciated.

EDIT FROM COMMENT:

I would prefer to be able to add my directive like so:

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

I think this would mean my directive would have to take the responsibility of the polling, or somehow pass these parameters to the controller to set up the polling.

• javascript
• angularjs
• angularjs-directive

• 1 This is what I've done: stackoverflow./questions/14237070/… – Sharondio Commented Jul 24, 2013 at 14:17
• Not sure what your backend is, but if it's .NET, you may want to take a look at SignalR @ github./SignalR/SignalR – Mike Pugh Commented Jul 24, 2013 at 18:29
• Signalr is definitely an option but at the moment I'm just looking for a more naive polling approach as I'm getting to grips with Angular. I'd probably prefer my backend to be totally decoupled though, providing all data through a REST API. – JMac Commented Jul 25, 2013 at 8:03
• Thanks @Sharondio, that definitely helped me get going. – JMac Commented Jul 25, 2013 at 12:36

2 Answers 2

I have written this example : http://jsfiddle/rishabh/Kuewm/

You can have 2 way data-binding using '=' in directive scope when declaring hash.

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

Now you need to update the data in your controller for each chart independently and they will get updated in your view/directive.

Now you can poll your service using $timeout like this :-

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

This will update your chartValue after 1000 millisec. You can use different values for different charts.

Edit : This is the fiddle http://jsfiddle/rishabh/76sKy/

You can just pass the value and have them updated in controller of directive.

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

Here's a very hacked together version of where I got to:

    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: "@"
    } 
}