No instructions no examples?

[maeishoj]

Excuse me, but no instructions or example on how to use this directive?

Edit: Could you give a basic example and how about choosing the progressbar type? how is that done?

[ClaytonSmith]

Agreed

[hubbubca]

Either of you two figure it out?

[ClaytonSmith]

http://kimmobrunfeldt.github.io/progressbar.js/

[hubbubca]

Thanks!

[maxostarr]

I'm still confused.

[hubbubca]

Put this in a controller -

$scope.progressbar = ngProgressFactory.createInstance(); // create progress bar instance $scope.progressbar.setHeight('8px'); // Set the height $scope.progressbar.setColor('#25c122'); // Set the colour

$scope.progressbar.set(percentFinished);

On Wed, Oct 14, 2015 at 9:55 AM Max Starr [email protected] wrote:

I'm still confused.

— Reply to this email directly or view it on GitHub https://github.com/felipecamposclarke/angular-progressbar/issues/1#issuecomment-148056647 .

[maxostarr]

Now I'm getting ReferenceError: ngProgressFactory is not defined

[hubbubca]

Make sure you inject it. index.html:

Controller:

.controller('BaseTimerCtrl', function ($scope, $stateParams, ngProgressFactory) {

On Wed, Oct 14, 2015 at 8:11 PM Max Starr [email protected] wrote:

Now I'm getting ReferenceError: ngProgressFactory is not defined

— Reply to this email directly or view it on GitHub https://github.com/felipecamposclarke/angular-progressbar/issues/1#issuecomment-148238134 .

[aaroncalderon]

@felipecamposclarke Hi, when you have a chance, can you provide an example of how to use this directive?

Thanks.

[aaroncalderon]

@headspincommunication do you happen have an example of how to use this module? @hubbubca are you making reference in your comment to ngProgress?

Update

Setup JavaScript

So far this is what I have found. On JavaScript, add the module as a dependency:

angular.module('demo', ['angularProgressbar']);

Setup HTML

On HTML, add the corresponding directive tag e.g.:

<!-- element form works -->
<pb-line progress-key="myLine"></pb-line>
<pb-circle progress-key="myCircle"></pb-circle>
<pb-square progress-key="mySquare"></pb-square>
<pb-path progress-key="myPath"></pb-path>
<!-- attribute form works too -->
<div pb-circle progress-key="myCircleDiv"></div>
<!-- I believe all forms work -->

The progress-key parameter is required... ~~I have yet to figure out how to set the options...~~

Update 2

Passing options to directive

So far, to pass options you do the flowing, on the controller set a variable in the $scope to use as the options. In my case I named it options so I set $scope.options. You can set, say, $scope.circleOptions if you wish.

angular.module('demo', ['angularProgressbar'])
.controller('demoCtrl', ['$scope', '$pbService',  
                function( $scope,   $pbService ){
    $scope.options = {
        color: '#FCB03C',
        duration: 3000,
        easing: 'easeInOut'};
    $scope.circleOptions = {
        color: '#FCBB33',
        duration: 2000,
        easing: 'easeInOut'};
}]);

In the HTML you add an attribute called options and you put the scope variable as the value.

<pb-line progress-key="myLine" options="options"></pb-line>
<!--  or, if your variable is called 'lineOptions' in your scope then -->\
<pb-circle progress-key="myLine" options="circleOptions"></pb-circle>

~~I have not figured out how to use the $pbService to animate, set or stop the progress bar...~~

Update 3

animate, set, or stop

Turns out that you can handle the animate, set or stop through the controller, e.g.:

Javascript

angular.module('demo', ['angularProgressbar'])
.controller('demoCtrl', ['$scope', '$pbService', '$timeout',  
                function( $scope,   $pbService,   $timeout ){
    $scope.options = {
        color: '#FCB03C',
        duration: 3000,
        easing: 'easeInOut'
    };
    $scope.lineProgress = 0;

    $scope.animateLine = function(){
        $scope.lineProgress = $scope.lineProgress + .05; 
        $pbService.animate('myLine', $scope.lineProgress, $scope.options);
    };
    $scope.setLine = function(){ 
        $scope.lineProgress = $scope.lineProgress + .05; 
        $pbService.set('myCircle', $scope.lineProgress);
    };
    $timeout(function() {
        $scope.setLine();
        $scope.animateLine();
        console.log('update progress bar')
    }, 3000);
}]);

HTML

<body ng-app="demo" ng-controller="demoCtrl">
    <div class="container">
        <h2>angular-progressbar.js samples</h2>
        <button ng-click="animateLine()">animate line to +5%s</button>
        <button ng-click="setLine()">set line to +5%s</button> Current progress value: {{lineProgress}}
        <div class="width">
<pb-line progress-key="myLine" options='options'></pb-line>
<pb-circle progress-key="myCircle"></pb-circle>
        </div>
    </div>
</body>

Event set is broken

Please note that the event set is currently broken because of line 30.

$rootScope.$broadcast('progressbar:stop', key, progress);

sould be

$rootScope.$broadcast('progressbar:set', key, progress);

Fiddle coming soon...