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编译器抱怨像这样的代码，说：多个对象文字属性名为“”background“”< / p>

Answer 1

如果您避免使用ngStyle指令并且刚刚使用了

，该怎么办？

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

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

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

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

1 个答案: