mathewbyrne/angular-progress-arc

AngularJS directive for displaying a circular progress meter.

angular-progress-arc's Issues

angular 1.4 support?

progress-arc doesn't seem to work with angular 1.4.7 (and perhaps earlier?).

No arc displays, but I get this error in the console: Unexpected value NaN parsing r attribute.

trivial example: http://jsfiddle.net/bkent/9nguLy6c/

How animate the progressbar ?

Thanks for your module, it's working very well !

I have one question, it's possible to animate the progressBar ? like 1 or 2sec with NgAnimate or something ?

Thanks

Demo page?

Would love to see a demo of this module. Using gh-pages perhaps?

Setting stroke via controller does not work

if I set the stroke in the html element or via css it works great, but if I set it via the controller it does not (the complete property works fine).

This is in the controller
$scope.data.profitChart = {
complete : 0,
stroke: '#F2985C'
};

And here is my element:

How do you update the progress?

How do you update the progress? I'm hoping to use this for a 15 second timeout, where the value updates each second around the circle. Thanks!

How to add text inside circle

I am trying to add text after but its not responsive

Counter Clockwise value of "false" has no effect

This is a great directive and is working really well for me so far. Thank you! This isn't a major issue but more of a suggestion. When I first implemented this I used counter-clockwise="false" because I anticipated this would be the correct way to specify clockwise. I discovered that it has to be counter-clockwise="" in order to work. I think it would make more sense to require a true/false value for this.

Feature Request: content inside progress arc

Would it be feasible to render the sub-elements of the <progress-arc> element as content centered within the arc?

This would be very convenient for placing an icon or perhaps to display the percent complete.

For example:
<progress-arc ... > {{complete}} % </progress-arc>
or
<progress-arc ... > <i class="fa fa-clock-o"></i> </progress-arc>

Thoughts??

counter-clockwise on safari inverts stroke and background

When viewing the page http://mathewbyrne.github.io/angular-progress-arc/ on Safari, the counter-clockwise-example has wrong colours.

Maximum radius setting leaves gap in arc centre.

To do with the -1 applied to the radius that avoids clipping with the SVG border.

All of a sudden getting stroke error

Error: [$parse:syntax] Syntax Error: Token 'stroke' is unexpected, expecting [:] at column     3 of the expression [{{stroke}}] starting at [stroke}}].
http://errors.angularjs.org/1.2.15/$parse/syntax?p0=stroke&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=3&p3=%7B%7Bstroke%7D%7D&p4=stroke%7D%7D
    at http://127.0.0.1:9000/bower_components/angular/angular.js:78:12
    at Parser.throwError (http://127.0.0.1:9000/bower_components/angular/angular.js:10047:11)
    at Parser.consume (http://127.0.0.1:9000/bower_components/angular/angular.js:10084:12)
    at Parser.object (http://127.0.0.1:9000/bower_components/angular/angular.js:10397:14)
    at Parser.primary (http://127.0.0.1:9000/bower_components/angular/angular.js:10015:22)
    at Parser.unary (http://127.0.0.1:9000/bower_components/angular/angular.js:10273:19)
    at Parser.multiplicative (http://127.0.0.1:9000/bower_components/angular/angular.js:10256:21)
    at Parser.additive (http://127.0.0.1:9000/bower_components/angular/angular.js:10247:21)
    at Parser.relational (http://127.0.0.1:9000/bower_components/angular/angular.js:10238:21)
    at Parser.equality (http://127.0.0.1:9000/bower_components/angular/angular.js:10229:21) 
 

I haven't changed anything. Tried to reinstall the plugin but still getting same error

Publish to npm?

Any chance you could publish this module to npm so it could be used with Browserify?

Transparency in angular-progress-arc

Please how do I make this transparent such that I can have the round progress around a round image??

Conflicts with other progress directives

I get the error

Error: [$compile:multidir] Multiple directives [progress, progressArc] asking for new/isolated scope on: <div class="progress" ng-transclude="" size="200" stroke="#007034" stroke-width="20" progress="0.65" counter-clockwise="false">

Note that the div is actually called "progress-div". It's not recognizing this.

How can I define "complete" when getting values from another Controller?

Hello there!

Thanks for sharing your work - it seems to do exactly what I need, except I can not make it work :)
I want to simply pass a long a new value for the "complete" scope which comes from another Controller I've defined. Please take a look at my code: http://pastebin.com/0HPG7SSt

That is all I'm doing with your code - it does work when I hardcode a value into "complete", but not when trying to pass a long the new value for each client...

What am I missing? I'm new to all this, so I'm sure I'm doing something wrong... Why isn't it binding the data? Do I have to tweak your directive, create a new controller...? Any help is much appreciated!

Thanks!
Pedro

Animate Progress?

Thanks for providing this great directive.

Is there any way to animate the progress changes via CSS or something else for the SVG?

Multiple Directives asking for new / isolated scope

I tried doing a super simple example to get a feel for the plugin.

Console's displaying the following error:

Error: [$compile:multidir] Multiple directives [progress, progressArc] asking for new/isolated scope on:

Any idea what I'm doing wrong?