javascript - 具有相同命名属性的 ng 样式和 javascript 对象

Question

遇到这种情况你们是怎么处理的:

<div ng-style='currentStyle'>

scope.currentStyle = {
   "background": "-moz-linear-gradient(top, " + colorFrom + " 0%, " + colorTo + " 100%)",
   "background": "-webkit-gradient(linear, left top, left bottom, color-stop(0%, " + colorFrom + "), color-stop(100%," + colorTo + "))",
   "background": "-webkit-linear-gradient(top,  " + colorFrom + " 0%," + colorTo + " 100%)",
   "background": "-o-linear-gradient(top,  " + colorFrom + " 0%," + colorTo + " 100%)",
   "background": "-ms-linear-gradient(top,  " + colorFrom + " 0%," + colorTo + " 100%)",
   "background": "linear-gradient(to bottom,  " + colorFrom + " 0%," + colorTo + " 100%)"
}

如果使用具有相同命名键的 javascript 对象似乎是错误的，不是吗？那如何制作渐变风格呢？

upd:我不知道，也许像这样的 javascript 对象没有任何问题(在我的浏览器中工作)，但是 coffeescript 编译器提示这样的代码，说:多个对象文字属性名为“”背景“”

Answer 1

如果您避免使用 ngStyle 指令而只使用:

<div style='{{currentStyle}}'></div>

这样您就可以在纯 CSS 中将样式声明创建为字符串。

$scope.currentStyle = "background: -moz-linear-gradient(top, " + colorFrom + " 0%, " + colorTo + " 100%);"
[etc....]