如何通过函数获取ng-style的多css规则？

Question

我需要应用多css规则，以html标签的角度形式模板。

<div class="form-control" id="data.objectStyle"  
  ng-model="data.type" 
  ng-style="getStyle(data.objectStyle)">
{{data.objectStyle.title}}
</div>

控制器中的getStyle函数：

$scope.getStyle = function (taskType) {
    return {
         background-color:taskType.backColor,
         color: taskType.color,
         font-size:taskType.fontSize,
         font-family:taskType.font
    }
)};

taskType对象：

{
    backColor:'#006',
    color:'#56DA',
    fontSize:12,
    font:'New Times Roman'
}

getStyle函数没有返回样式！该怎么办呢？

Answer 1

编辑

docs指定您需要用引号将键括起来，这样它们就不是无效JSON对象键：

return {
     "background-color": taskType.backColor,
     "color": taskType.color,
     "font-size":taskType.fontSize,
     "font-family":taskType.font
}

老答案(不使用ng样式)

虽然我从未使用过ng-style，但它似乎不接受对象。相反，它等同于ng-class，但用于单一样式。

尝试将您的函数更改为：

$scope.getStyle = function (taskType) {

        return {
         "background-color:"+taskType.backColor+
         ";color:"+ taskType.color+
         ";font-size:"+taskType.fontSize+
         ";font-family:"+taskType.font+";";
    }
)};

以及通过绑定使用常规样式标记的html：

<div class="form-control" id="data.objectStyle"  
ng-model="data.type" style="{{getStyle(data.objectStyle)}}">