javascript - 为什么在模板之间切换时 animate ="true"被忽略？

Question

我有以下plunkr (代码如下)

我正在 Angular 模板之间切换。每个模板都有来自 angular-ui 项目的 progressbar 指令。

第一个模板具有属性 'animate=false'，而其余模板具有 animate=true。

我特意修改了模板，使它们彼此不同。 一个是空白的，其他有包装 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>');
}
]);

Answer 1

我有一个你想要的工作版本 here 。您会注意到我使用的一般模式是:

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

请注意我如何为每个模板设置 2 个超时；您必须给进度条一些时间来更改值。