0

次のplunkrがあります（以下のコード）

angular でテンプレートを切り替えています。各テンプレートには、プロジェクトprogressbarからのディレクティブがあります。angular-ui

最初のテンプレートには属性'animate=false'があり、残りのテンプレートには animate=true があります。

テンプレートを意図的に変更して、テンプレートが互いに異なるようにしました。1つは空白、他はラッピングdivなどです...

ただし、animate 属性値の変更は無視されます。すべてのディレクティブは を使用しますfalse。

ディレクティブの実装を変更できません。

  • 最後の 2 つのテンプレートで進行状況の変化をアニメーション化するにはどうすればよいですか

ここに私が生成したテンプレートがあります

angular.module("myProgressBarApp").run(["$templateCache", function($templateCache) {
  $templateCache.put("first.html",
    '<div>hello world</div><div><progressbar animate="false" value="progressPercentage" id="mograbi" class="progressbar"> <b>{{progressPercentage}}%</b></progressbar></div>');
      $templateCache.put("second.html",
    '<progressbar animate="true" id="guy" value="progressPercentage" type="primary" class="progressbar"> <b>{{progressPercentage}}%</b></progressbar>');
    $templateCache.put("third.html",
    'this is third');
    $templateCache.put("fourth.html",
    '<progressbar animate="true" id="guy3" value="progressPercentage" type="primary" class="progressbar"> <b>{{progressPercentage}}%</b></progressbar>');
    $templateCache.put("fifth.html",
    '<progressbar animate="true" id="guy4" value="progressPercentage" type="primary" class="progressbar"> <b>{{progressPercentage}}%</b></progressbar>');
}
]);
4

2 に答える 2

2

私はあなたがここに欲しいものの実用的なバージョンを持っています. 私が使用した一般的なパターンは次のとおりです。

 $timeout( function(){
    $scope.progressPercentage = 0;
    $scope.includeRoute = "second.html"
  }, 1000);
  $timeout( function(){$scope.progressPercentage = 88;
       }, 1100);

すべてのテンプレートに 2 つのタイムアウトがあることに注意してください。値を変更するには、進行状況バーにしばらく時間がかかる必要があります。

于 2014-07-19T17:52:06.313 に答える