Multiple progressbar directive with different "current" amount

[ayanb1991]

the directive is working very well but how can I set multiple current values for multiple progressbar directives, Please help.

[crisbeto]

I'm not sure what you mean. Can you post an example?

[ayanb1991]

Below is a simple directive, here I am increasing current scope variable to increase the progressbar.

"<round-progress current="current"> <svg> <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="green"/> <stop offset="95%" stop-color="gold"/> </linearGradient> </round-progress>"

Now I want multiple instances of this same directive to added dynamically in a page, but with different set of current scope, suppose the first progress bar will render at 10% and other one will render at 25%.

My question is that if I have multiple instances of this same directive on a single page how can I increase a progress bar of a particular directive through controller.

I hope I made you understand, otherwise I will post my code example.

[crisbeto]

In that case, you can have some like this in your controller:

angular.module('<your module>').controller('<your controller>', ['$scope', function($scope){
  $scope.items = [
    { current: 10 },
    { current: 25 },
    { current: 50 }
  ];
}]);

Then your view would look like this:

<round-progress current="item.current" ng-repeat="item in items"></round-progress>

<svg>
  <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
    <stop offset="5%" stop-color="green" />
    <stop offset="95%" stop-color="gold" />
  </linearGradient>
</svg>

Also note about the gradient: you only need it once in the page, it doesn't have to be a child of a random-progress.