Angular方法与NG式使用时无限期执行

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);
                },

我已经使用了上面的代码在页面上显示进度栏。progress bar正常工作。但是，当我在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);
                },