Angular方法与ng-style一起使用时会无限期执行

Question

HTML

<div class="progress-bar" ng-style="{width: Event.Methods.GetProgress() + '%'}"></div>

JS

 GetProgress: function () {
                    var total = Number($scope.Event.Item.Total);
                    var goal = Number($scope.Event.Item.Goal);
                    if (total > goal) {
                        total = goal;
                    }
                    return Math.round((total / goal) * 100);
                },

我已经使用上面的代码在页面上显示了进度条，进度条工作正常，但是当我在GetProgress()方法上放置一个调试点并无限期执行时，当我删除ng-style时就没有问题（但是您知道我的进度条也无法正常工作。）那么您能告诉我如何避免上述行为吗？ 提前致谢。

Answer 1

HTML

<div class="progress-bar" ng-style="{width: progressValue + '%'}"></div>

JS

//initially setup the value
$scope.progressValue = 0;

//then on every call of GetProgress is updated 
 GetProgress: function () {
                    var total = Number($scope.Event.Item.Total);
                    var goal = Number($scope.Event.Item.Goal);
                    if (total > goal) {
                        total = goal;
                    }
                    $scope.progressValue = Math.round((total / goal) * 100);
                },