Как заставить progressbar работать?

Question

Я только начинаю с углового и пытается создать ProgressBar с директивой:

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> 

Он входит в цикл, но ничего не отображает? Это ссылка на скрипку: http://jsfiddle.net/dingen2010/fg229svz/23/

Answer 1

Первый всего, ваш progress-bar не имеет высоту, поэтому его высота 0px. Установите высоту.

Во-вторых, ваш прогресс должен быть (i+1) не (i/100), так как ширина от 0% до 100%. В противном случае width будет от 0.01% до 0.99%.

В-третьих, я думаю, вы неправильно поняли, что link для. link должен быть заполнен до того, как будет выведена любая директива, поэтому вы не увидите анимационную анимацию progress-bar. Приложение ждет цикла внутри link, чтобы закончить перед отображением.

Что вам нужно сделать, это $watch какой-либо атрибут директивы для загрузки прогресса. Есть много способов осуществить это, это только один из способов:

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