为什么我在模板之间切换时忽略 animate="true"？答案

【问题标题】：why is animate="true" ignored when I switch between templates?为什么我在模板之间切换时忽略 animate="true"？
【发布时间】：2014-07-19 10:45:40
【问题描述】：

我有以下plunkr（代码如下）

我在角度模板之间切换。每个模板都有来自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>');
}
]);

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap angular-directive

【解决方案1】：

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

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

注意每个模板都有 2 次超时；您必须给进度条一些时间来更改值。

【讨论】：

我也在考虑尝试这样做，但仍然认为存在一些错误，因为它在以前的版本中有效，并且不需要像这样的步骤
我刚刚又看了你的plunker。您的第二个进度条动画的原因是因为您连续两次包含 second.html，具有不同的 progressPercentage 值。其他情况没有动画，因为您在模板被渲染之前更改了progressPercentage 值，所以没有任何东西可以动画。 $scope 变量得到更新，然后 angular 运行 $digest 循环并在那里更新你的模板，所以它不是一个错误，它只是事情发生的顺序
确实 - 我复制了超时，而不是您的建议，一个更改了 includeRoute，另一个设置了 progressPercentage。一旦有 2 组不同的超时，它就起作用了。

【解决方案2】：

如果您恢复到之前的版本ui-bootstrap-tpls-0.10.0.js，您的演示可以正常工作

DEMO

最好在 angular-ui 问题跟踪器中将此作为可能的错误报告

【讨论】：