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>

它进入循环但没有显示？这是一个小提琴的链接： 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/

如何让progressbar工作？

1 个答案: