html进度条没有用angularjs更新

Question

我正在尝试设置一个进度条并使用像这样的角度更新它的进度

<progressbar value="{{data.progress}}"></progressbar>

控制器代码：

myApp.controller( "MainCtrl", [ "$scope", "$timeout", function($scope, $timeout) {
    $scope.data = { progress : 0 };
    (function progress(){
        if($scope.data.progress < 100){
            $timeout(function(){
                $scope.data.progress += 1;
                progress();
            },200);
        }
    })();
}]);

当data.progress变量为时，条形图不会更新。它甚至没有显示！这个设计出了什么问题？

http://jsfiddle.net/1ptm607v/2/

Answer 1

您应该为progressbar指令提供表达式：

<progressbar value="data.progress"></progressbar>

使用{{}} Angular评估表达式，但这不是您需要的。

顺便说一句，控制台中也有一个错误，因此请保持开发人员工具一直打开以便进行更简单的调试。

演示：http://jsfiddle.net/1ptm607v/3/

Answer 2

progress-value是另一种方法：

<span class="progress-value">{{data.progress}}%</span>