Css 如何应用AngularJS中绑定到模型的样式规则？

我正在构建一个应用程序，在页面加载时向客户端发送1-5个视图和适当的模型和控制器。用户被引导到每个视图连续使用路由，这是工作得很好

我遇到的问题是，我想将样式规则应用于视图，但样式规则与模型绑定。我知道我不能简单地将一些css保存为文本并将它们注入到

块中。我不能简单地添加对.css文件的引用，因为所有这些都来自一个数据库，并且每个模型都可能有与另一个模型冲突的样式规则

有关于如何解决此问题的建议吗？

您可以在页面中插入样式元素：

angular.module('myApp', [])
.controller('MyController', function($scope) {
  $scope.css = ".red { color: red;}"
})
.directive('myDirective', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      var style = angular.element('<style type="text/css"></style>');
      style.append(scope.css);
      elem.append(style);
    }
  }
});

angular.module（'myApp'，[]）
.controller（'MyController'，函数（$scope）{
$scope.css=“.red{color:red；}”
})
.directive（'myDirective'，function（）{
返回{
限制：'E'，
链接：功能（范围、要素、属性）{
变量样式=角度元素（“”）；
style.append（scope.css）；
元素附加（样式）；
}
}
});

---

下面是一个使用ng类的示例。如果您可以将css规则从数据库中取出并放入$scope对象中，如下所示：

$scope.css = {
    divcss:{
      'border-style': 'solid',
      'border-width': '2px',
      'background-color': 'yellow'
    },
    headercss:{
      'font-weight': 'bold',
      'font-size': '50px'
    }
  }

<div ng-style="css.divcss">Check it out</div>
<span ng-style="css.headercss">Big ol' Header</span>

然后可以将它们应用于视图元素，如下所示：

$scope.css = {
    divcss:{
      'border-style': 'solid',
      'border-width': '2px',
      'background-color': 'yellow'
    },
    headercss:{
      'font-weight': 'bold',
      'font-size': '50px'
    }
  }

<div ng-style="css.divcss">Check it out</div>
<span ng-style="css.headercss">Big ol' Header</span>

查看它
大圆头

---

请参见，您可以将其绑定到样式为类名称的对象，属性为布尔值，指示其应用状态。谢谢Jerrad。这可能不适用于我们正在尝试做的事情，因为css代码必须用json格式化，我应该在问题中提到。有没有办法让它在IE8中工作？我已经尝试过将IE8的所有最佳实践用于解决这个问题，但它仍然不起作用。在这里，它将在IE中起作用（但在其他浏览器中不起作用）：我将把让它在这两个地方都起作用的真正工作留给你；-）。。这意味着您应该能够结合这两种解决方案