Question

我有以下plunkr（下面的代码）

我在角度模板之间切换。每个模板都有progressbar项目的angular-ui指令。

第一个模板具有属性'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次超时;你必须给进度条一些时间来改变数值。

Answer 2

如果您恢复到之前的版本ui-bootstrap-tpls-0.10.0.js

，您的演示工作正常

的 DEMO

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

为什么animate =＆＃34; true＆＃34;我在模板之间切换时被忽略了？

2 个答案: