Динамический встроенный CSS с помощью AngularJS

Question

У меня есть угловое приложение и вам нужно применить некоторые стили CSS на странице во время выполнения.

Решение с использованием нг-стиль не является масштабируемым:

Я знаю, что для конкретных (известных) элементов, это можно легко сделать с помощью нг-директивный стиль, например:

<div id="mydiv" ng-style="{color: bgColor}">ABCD</div> 

Однако этот метод не может применяться ко всем тегам <a> или <p> на странице. Как применить динамический стиль, основанный на переменной угловой области, для ВСЕХ экземпляров тега на странице?

что-то вроде следующего было бы идеально:

<style> 
.in3_counter {color: {{settings.in3Color}};} 
.in4_counter {color: {{settings.in4Color}};} 
</style> 

Update: Значение переменных CSS область не предопределено, так что я, мы не знаем, какие цвета будут применяться к элементам поскольку переменные устанавливаются во время выполнения (например, с помощью набора цветов).

Любые предложения?

Answer 1

Проверьте следующий пример:

var COLOR_CTRL = function($scope, $sce) { 
 

 
    $scope.changeColor = function(color) { 
 
    $scope.style = $sce.trustAsHtml('a, p {color: ' + color + '}'); 
 
    }; 
 

 
    $scope.changeColor('#000'); 
 

 
}; 
 

 
var app = angular.module('app', []); 
 

 
app.controller('ColorCtrl', ['$scope', '$sce', COLOR_CTRL]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> 
 

 
<div ng-controller="ColorCtrl" ng-app="app"> 
 

 
    <a href="#">anchor</a> 
 

 
    <p>paragraph</p> 
 

 
    <div> 
 

 
    <button ng-click="changeColor('#f00')">red</button> 
 
    <button ng-click="changeColor('#0f0')">green</button> 
 
    <button ng-click="changeColor('#00f')">blue</button> 
 

 
    </div> 
 

 
    <style data-ng-bind-html="style"></style> 
 

 
</div>