angularjs - ng-style 有延迟

Question

我正在使用 ng-style 设置元素的宽度，如下所示：

<div ng-style="{ width: calculateWidth(item.shares,'shares') }"></div>

我在控制器中使用的功能：

  $scope.calculateWidth = function(input,type){
    var width = input / maxObject[type] * 100;
    if (isNaN(width)) return 0
    else return width+'%'
  }

现在我想通过在元素上使用 CSS 过渡来为这个宽度设置动画。但是当我以这种方式使用它时，在渲染元素时已经应用了结果的宽度，因此不会显示任何过渡。

我尝试在 calculateWidth 函数中使用 $timeout，但是该函数根本不起作用，结果宽度都为 0。

是否有可能以某种方式延迟这种 ng 风格的应用？

Answer 1

将您的样式表达式绑定到范围变量，然后在$timeout调用中修改该项目。

<div ng-style="item.style"></div>

然后在 Angular 中，样式会在 2 秒延迟后应用（循环遍历项目集合）。

$timeout(function() {
    angular.forEach(itemList, function(item) {
        item.style = { width: $scope.calculateWidth(item.shares, 'shares') };
    });
}, 2000);