使用 ng 样式进行背景渐变时出现 AngularJS 语法错误
AngularJS syntax error while using ng-style for background gradient
AngularJS语法错误,同时使用ng-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}} 角度表达式的计算结果为 JavaScript 字符串,而不是使用 { 字段 : "value", ...} 设置的 JavaScript 对象。AngularJS 语法错误可能是由于尝试将 $scope.styleStatus 对象写入表达式而导致的。
另一个变化是线性渐变的色标中仅包含一个%。仅在第二个色标中使用 %。
CSS3 线性渐变在大多数浏览器中已经支持了一段时间。
一般语法:
背景:线性渐变(方向,色停1,色停2,...);
将两个色标设置为相同的 % 时,您不会获得线性渐变,而是在第一种颜色输入的 % 值处出现换色符,通常浏览器会忽略第二种颜色上的 %。
在浏览器中使用以下示例代码来测试一些线性渐变。
网页代码
<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:使用$scope$以控制器作为语法进行观察
- AngularJS $http GET 请求到本地 JSON 文件返回语法错误:意外令牌]
- AngularJS在使用值作为值语法时选择不绑定
- angularjs在拆分字符串时解析语法错误
- 尝试理解$.inArray,或将$scope转换为“$scope”;控制器As”;AngularJS中的语法
- AngularJS app.controller语法错误
- 我正在努力理解AngularJS's控制器的语法
- 以控制器为语法的多个angularjs指令实例
- 使用表达式作为函数的参数时,AngularJS抛出语法解析错误
- AngularJS“控制器作为”语法错误
- 使用 ng 样式进行背景渐变时出现 AngularJS 语法错误
- 更改 AngularJs 或 Polymer 中的绑定语法
- angularjs:vm 是未定义的,当在指令中使用 contronllerAs 语法时
- AngularJs 2: 如何调试服务调用?(ES6 语法)
- AngularJS - 循环遍历数组正在抛出语法错误
- AngularJS控制器语法 - 数组和函数版本之间的差异
- AngularJS在从HTTP返回的JSON中获取语法错误.JSONP.
- ng类的angularjs语法错误
- angularjs语法错误
- 交换AngularJS语法导致错误