Question

我在使用ng-repeat创建的表中使用了角度进度条指令，以及一个jquery表分类器插件。

问题是初始动画根本不会完成/显示;当用户刷新页面时，他将获得已经设置为正确级别/值的进度表。

如果我稍后更改值，使用虚拟按钮，动画将正确显示。

我的问题是：

如何延迟起始动画，以便显示从0（某些初始值）到某个特定值-64的进度，例如64。

如果您有使用某种不同方法的建议，请不要犹豫告诉我，我心胸开阔。

Answer 1

如果有人提出类似问题，可能会帮助他使用angular $timeout service。问题是如果你有很多进度条，比如我（单页上200 +），你会遇到性能问题，特别是对于那些不使用谷歌浏览器的用户。

这是更新后的'progressbar'指令：

.directive('progressbar', ['$transition', '$timeout', function($transition, $timeout) {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            width: '=',
            old: '=',
            type: '=',
            animate: '='
        },
        templateUrl: 'template/progressbar/bar.html',
        link: function(scope, element) {
            $timeout(function(){
                scope.$watch('width', function(value) {
                    if (scope.animate) {
                        element.css('width', scope.old + '%');
                        $transition(element, {width: value + '%'});
                    } else {
                        element.css('width', value + '%');
                    }
                });
            },100)

        }
    };
}]);

角度进度条延迟/或值更新程序

1 个答案: