0

jqueryテーブルソータープラグインとともに、ng-repeatで作成されたテーブルでAngularのprogress-barディレクティブを使用しています。

問題は、最初のアニメーションがまったく実行/表示されないことです。ユーザーがページを更新すると、進行状況がすでに正しいレベル/値に設定されているテーブルが表示されます。

後でダミー ボタンを使用して値を変更すると、アニメーションが正しく表示されます。

私の質問は：

0 (初期値) から特定の値 - 64 までの進行状況を表示するために、アニメーションの開始を遅らせるにはどうすればよいですか?

別のアプローチを使用する提案がある場合は、遠慮なく教えてください。私は心を開いています。

4

1 に答える 1

0

誰かが同様の問題を思いついた場合、angular $timeout serviceを使用すると役立つかもしれません。問題は、私のようにプログレス バーがたくさんある場合 (1 ページに 200 以上)、特に Google Chrome を使用していないユーザーの場合、パフォーマンスに問題が発生することです。

更新された '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)

        }
    };
}]);
于 2013-10-30T11:20:54.743 に答える