Rgba 值未以 ng 样式更新

Posted 2023-03-06

【中文标题】Rgba 值未以 ng 样式更新

【英文标题】：Rgba value is not updated in ng-style

【发布时间】：2015-10-19 13:12:00

【问题描述】：

我有一个 div，它有一个 ng-style 属性和一个 rgba 值，它使用 $scope 变量作为 alpha 值：

ng-style="'background-color': 'rgba(255,0,0, alphaValue / 100)'"

我有一个改变 alphaValue 值的输入滑块。我可以使用 console.log 看到值的变化，并且 rgba 值正在 html 的调试器中更新。它只是没有在视图中应用。

有什么建议吗？

【问题讨论】：

尝试使用-ng-style="'background-color': 'rgba(255,0,0,alphaValue / 100)'"

不行，你需要 来读取字母值。

从 alphaValue 周围移除

【参考方案1】：

如下图所示

ng-style="'background-color': 'rgba(255,0,0,'+ (alphaValue/ 100) +')'"

【讨论】：

@SilvioTroia 如果你查看ngStyle API，你会看到有一个 $watcher 放置在属性值上，而 watcher 总是需要expression 而不是（插值）跨度>

【参考方案2】：

我怀疑您需要使用控制器方法：

$scope.getRGBA = function(alpha)              
   return 'rgba(255,0,0,'+ alpha / 100 + ')';

HTML

ng-style="'background-color':  getRGBA (alphaValue)"

应该确保alpha 也不是未定义的并设置一个默认值

【参考方案3】：

创建一个控制器方法获取样式对象。其更清洁的方法。

HTML

ng-style="ctrl.getElementStyle(alphaValue)"

控制器

 ctrl.getElementStyle = function (alphaValue) 
        var alpha = alphaValue / 100;
        return 'background': 'rgba(255,0,0,' + alpha +')';
  ;