Angular：绑定表达式如何工作？

Question

<section class="slide-show" ng-style="getBgStyle()">
   hello
</section>

在控制器中：

$scope.getBgStyle = function(){
  return "{'background-color':'blue'}";
}

没有显示颜色。但是：

<section class="slide-show" ng-style="{{getBgStyle()}}">
   hello
</section>

这确实有效。从文档中可以看出，ng-style需要一个＆＃34;表达式＆＃34;。

这是关于表达的一个非常常见的问题，我认为＆＃39; x＆＃39;与＆＃39; {{x}}＆＃39;已被问过1000次。函数调用有区别吗？

Answer 1

这是一个非常时髦（我很惊讶，它的工作原理）使用表达方式。

让您的getBgStyle函数返回一个对象 - 而不是一个可以$eval的字符串 - 对象：

$scope.getBgStyle = function(){
  return {'background-color':'blue'};
}

<section class="slide-show" ng-style="getBgStyle()">
   hello
</section>

修改：

有趣的是，以下两个表达式都有效：

ng-style="{'background-color': 'blue'}"
ng-style="{{ {'background-color': 'blue'} }}"