使用 ng-style 作为背景渐变时出现 AngularJS 语法错误，并且如果我仅使用 style 标签，则无法在 IE 11 中工作。需要帮助
<div class="test-data" ng-style="{{statusStyle}}"></div>
var empty = 100 - status.test;
$scope.statusStyle = {'background': 'linear-gradient(#f2f2f2 ' + empty + '%, ' + color + ' ' + empty + '%)'};
Error: [$parse:lexerr] http://errors.angularjs.org/1.3.16/$parse/lexerr?p0=Unexpected%20nextharacter%20&p1=s%2028-28%20%5B%23%5D&p2=background%3A%20linear-gradient(%cbcbcb%2026%25%2C%20%2378bc00%2026%25)%3B
at Error (native)
at http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:20:417
at kc.throwError (http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:201:190)
at kc.lex (http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:200:49)
at lb.parse (http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:204:178)
at http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:124:366
at m.$watch (http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:134:310)
at http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:250:437
at Xc (http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:84:279)
at M (http://localhost:52000/Scripts/ext-lib.js?v-635938893578389223:73:323)
最佳答案
尝试此代码更改
<div class="test-data" style="background: {{statusStyle}}"></div>
var empty = 100 - status.test;
$scope.statusStyle = 'linear-gradient(#f2f2f2, ' + color + ' ' + empty + '%)';
此更改使 {{statusSyle}} Angular 表达式计算为 JavaScript 字符串，而不是使用 { field : "value", ...} 设置的 JavaScript 对象。 AngularJS 语法错误可能是由于尝试将 $scope.styleStatus 对象写入表达式而导致的。
另一个变化是在线性渐变的色标中仅包含 1%。仅在第二个色标中使用 %。
大多数浏览器支持 CSS3 线性渐变已有一段时间了。
一般语法:
背景:线性渐变(方向，color-stop1，color-stop2，...)；
将两个颜色停止点设置为相同的％时，您将不会获得线性渐变，而是会在使用第一种颜色输入的％值处获得颜色中断，并且通常浏览器会忽略第二种颜色上的％。
在浏览器中使用下面的示例代码来测试一些线性渐变。
HTML 代码
<body>
<div id="grad"></div>
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
<br>
Syntax:<br>
background: linear-gradient(direction, color-stop1, color-stop2, ...);
</body>
样式
#grad {
width: 100%;
height: 620px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow 90%);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow 90%);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow 90%);
/ For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow 90%);
/* Standard syntax */
}
关于javascript - 使用 ng-style 进行背景渐变时出现 AngularJS 语法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36074489/