CODEWITHSUNDEEP
angularjshtmltwitter-bootstrap-3
bier hier
bier hier

Reputation: 22520

How to get progressbar working?

I am just starting out with angular and trying to create a progressbar with a directive:

var module = angular.module("app", []);
module.directive("progressbar", function () {
    return {
        restrict: "A",
        link: function (scope, element) {

            //debugger;
            for (var i = 0; i<100;i++) {
                console.log(i);
                element.css("width", i / 100 + "%");
            }

        }
    };
});

HTML

<div ng-app="app">
    <div class="progress-bar progress-bar-warning" progressbar></div>
</div>

It enters the loop but nothing is displaying? This is a link to a fiddle: http://jsfiddle.net/dingen2010/fg229svz/23/

Upvotes: 2

Views: 791

Answers (1)

pbeta
pbeta

Reputation: 864

First of all, your progress-bar doesn't have height, so its height is 0px. Please set some height.

Secondly, your progress should be (i+1) not (i/100), since width is from 0% to 100%. Otherwise, width would be from 0.01% to 0.99%.

Thirdly, I think you misunderstand what link is for. link must be completed before any directive is rendered, so you won't see progress-bar growing animation. The app will waits for loop inside link to finish before displaying.

What you need to do is $watch some directive attribute for loading progress. There are many way to implement this, this is just one of the way:

http://jsfiddle.net/dmqnqkkn/2/

Upvotes: 2

Related Questions