angularjs - 如何让进度条工作？

Question

我刚刚开始使用 Angular 并尝试使用指令创建进度条:

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>

进入循环但没有任何显示？这是 fiddle 的链接: http://jsfiddle.net/dingen2010/fg229svz/23/

Answer 1

首先，您的进度条没有高度，因此其高度为0px。请设置一些高度。

其次，您的进度应该是 (i+1) 而不是 (i/100)，因为宽度是从 0 开始的% 到 100%。否则，宽度将从0.01%到0.99%。

第三，我认为您误解了 link 的用途。 link 必须在渲染任何指令之前完成，因此您不会看到 progress-bar 增长动画。应用程序将等待 link 内的循环完成后再显示。

您需要做的是 $watch 一些用于加载进度的指令属性。有很多方法可以实现这一点，这只是其中一种:

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