Question

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

我遇到的问题是我想将样式规则应用于视图，但样式规则与模型相关联。我知道我不能简单地将一些css保存为文本并将其注入<style></style>块。我不能简单地添加对.css文件的引用，因为所有这些都来自数据库，并且每个模型都可能具有与另一个模型冲突的样式规则。

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

Answer 1

你可以在页面中插入一个样式元素：

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);
    }
  }
});

Plunker Demo

Answer 2

这是使用ng-class的一个例子。如果你可以从数据库中获取你的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>

Plunker demo

如何在AngularJS中应用与模型关联的样式规则？

2 个答案: