Question

使用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)

Answer 1

尝试此代码更改

<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一段时间了。

一般语法：
background：线性渐变（direction，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 */
}

使用ng-style作为背景渐变时出现AngularJS语法错误

1 个答案: