Another Angular Style Option

This style option will let you modify contents in a style tag to be applied for a given CSS selector.

by Gavin Palmer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/angular-ui/bootstrap-bower/0.13.4/ui-bootstrap-tpls.js"></script>
<body ng-app="myApp" ng-controller="MainCtrl as main" custom-style>
    <hr>
        <h1>header1: Easy Styling</h1>
    <hr>
        <h2>header2</h2>
    <hr>
        <h2>header2</h2>
    <hr>
        modify hr: <input type="color" ng-model="main.ms.theme.hr['border-color']"/>
        modify h1: <input type="color" ng-model="main.ms.theme.h1['color']"/>
        modify h2: <input type="color" ng-model="main.ms.theme.h2['color']"/>
        modify h3: <input type="color" ng-model="main.ms.theme.h3['color']"/>
        modify .special: <input type="color" ng-model="main.ms.theme['.special']['color']"/>
        
        <h3>a header3</h3><h3>b header3</h3><h3>c header3</h3><h3 class="special">c header4</h3><h3 class="special">c header5</h3>

</body>

JavaScript

var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
    var vm = this;
});
app.controller('MainCtrl', function(MainService){
    var vm = this;
    vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
    return {
        restrict : 'A',
        link : function(scope, element, attr){
            var style = angular.element('<style></style>');
            element.append(style);
            scope.$watch(function(){ return MainService.theme; },
            	function(){
                	var css = '';
                	angular.forEach(MainService.theme, function(selector, key){
                        angular.forEach(MainService.theme[key], function(val, k){
                        	css += key + ' { '+k+' : '+val+'} ';
                        });                        
                    });
                	style.html(css);
            	}, true);
        }
    };
});