Skip to content

Instantly share code, notes, and snippets.

@tjstebbing

tjstebbing/gist:4083252

Created November 16, 2012 01:59
Show Gist options
  • Save tjstebbing/4083252 to your computer and use it in GitHub Desktop.
Save tjstebbing/4083252 to your computer and use it in GitHub Desktop.
Download ZIP
live styles
Raw
gistfile1.txt
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script>
function CSS($scope) {
$scope.css = "body {\n background-color: #000;\n}";
}
angular.module('stylatron', []).directive('ngStyleContents',
function() {
return function(scope, element, attr) {
scope.$watch(attr.ngStyleContents, function(newContents, oldContents) {
if (newContents != oldContents) {
element.nodeValue = newContents;
}
});
}
});
</script>
</head>
<body ng-app='stylatron' ng-controller="CSS">
<style ng-style-contents='css'></style>
<textarea ng-model="css" cols='80' rows='20'> </textarea>
<h2>hmmmm</h2>
<div class='test'>{{css}}</div>
</body>
</html>
@raffecat
Copy link 

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script>
            function CSS($scope) {
                $scope.css = "body {\n  background-color: #000;\n}";
            }
            angular.module('stylatron', []).directive('ngStyleContents', 
                function() {  
                    return function(scope, element, attr) { 
                        scope.$watch(attr.ngStyleContents, function(newContents, oldContents) { 
                            if (newContents != oldContents) {
                                try { element[0].innerHTML = newContents; }
                                catch (e) { element[0].styleSheet.cssText = newContents; } // IE
                            }
                        });
                    }
                });

        </script>
    </head>
    <body ng-app='stylatron' ng-controller="CSS">
        <style ng-style-contents='css'></style>
        <textarea ng-model="css"  cols='80' rows='20'> </textarea>
        <h2>hmmmm</h2>
        <div class='test'>{{css}}</div>
    </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment