javascript - 具有相同命名属性的 ng-style 和 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....]