将ng样式用于背景渐变时AngularJS语法错误
[英]AngularJS syntax error while using ng-style for background gradient
问题描述
使用ng-style进行背景渐变时AngularJS语法错误，如果我仅使用样式标签，则在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)
1 个解决方案
解决方案1
0 已采纳 2016-03-18 03:56:20
试试这个代码更改
<div class="test-data" style="background: {{statusStyle}}"></div>
var empty = 100 - status.test;
$scope.statusStyle = 'linear-gradient(#f2f2f2, ' + color + ' ' + empty + '%)';
此更改使{{statusSyle}}角表达式的计算结果为JavaScript字符串，而不是设置为{field：“ value”，...}的JavaScript对象。 试图将$ scope.styleStatus对象写入表达式可能导致AngularJS语法错误。
另一个变化是在线性渐变的颜色停止中仅包含一个％。 仅在第二个颜色停止中使用％。
大多数浏览器都支持CSS3 Linear Gradients一段时间了。
一般语法：
背景：线性渐变（方向，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 */
}
在angularJS中使用ng-style而不是style时出错
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.