我知道这听起来很傻，但我正在编写一个所见即所得的编辑器，允许设计师创建样式指南。我对 angular 中的双向绑定(bind)非常着迷，并且很好奇是否可以在 css 工作表和 ng-model 输入字段之间进行双向绑定(bind)。目前，我正在制作一个动态样式指南，允许设计师为页面选择主要颜色和次要颜色。这些颜色将统一更改站点的整个主题，从样式表本身执行此操作会很棒。

HTML

<input type="text" ng-model="color.primary" /> 
<button class="btn primary-color" /> 

CSS

.primary-color { 
  background: {{color.primary}}; 
} 

js $scope.color {primary: '00f', secondary: '#e58'}

我知道有很多指令，比如 ng-style 和 ng-class 但我担心每个标签都必须是一个指令，因为一切都可以有一个 ng -style/ng-class 标签。从而使我的代码不是很枯燥和难以维护。

如果我想要一个动态的 css 样式指南怎么办。我可以作为 CSS 的键值对存储到像 firebase 这样的服务器中的工作表，甚至可能是 3way 实时绑定(bind)颜色的变化？我很确定这不能仅使用 angular 来完成...有人会对预编译器或 hack 有任何想法来完成这项任务，从而产生一个干净的风格吗？

请您参考如下方法:

这项工作非常有趣。

您可以通过 document.styleSheets 访问页面上的所有样式，因此您只需要将规则范围限定在样式上。所以假设我有这个类(class):

.class { 
    font-size: 20px; 
    color: blue; 
} 

jsfiddle是如何实现sheet的，这是添加到文档中的第三个样式表，所以我可以这样赋值给scope:

myApp.controller('TestController', ['$scope', function ($scope) { 
    $scope.styles = document.styleSheets[3].rules;      
}]);  

这将使您可以执行类似 $scope.styles[0].style['color'] = 'red' 的操作，将任何具有类的颜色更改为红色。因为它是样式数组中的第一件事。

但这还不够酷，所以我们想创建一个指令，我们可以从 ui 中更改这些指令。所以我们想知道类控制的所有东西，为它们创建控件，所以我们可以操纵 css 字符串来获取所有这些。

接下来我们必须在以所有样式开始的指令上创建一个临时作用域对象。原因是样式表有检查，所以当你输入一个输入时，如果你做了类似 $scope.styles[0].style['color'] = 'g' 并且它是红色的, 它只会重置为红色。

因此我们为每种样式类型创建一个输入，使用我们临时的 ng-model，然后只监听变化并尝试分配给样式表。

我创建了一个 fiddle我在哪里实现它，但指令看起来像这样。

myApp.directive('styler', function() { 
    return { 
        scope: { 
            styles: '=' 
        }, 
        restrict: 'EA', 
        template: '<div ng-repeat="type in types">{{type}} <input ng-change="Change(type)" ng-model="temp_styles[type]"/></div>', 
        link: function(scope, elt, attrs) {       
            // get the actual styles 
            var types = scope.styles.cssText.replace(/ /g, '').split('{')[1].split('}')[0].split(';'); 
            scope.types = []; 
            scope.temp_styles = {}; 
            // get rid of "" element at the end 
            types.pop(); 
            for (var i in types) { 
                var split = types[i].split(':'); 
                scope.types.push(split[0]); 
                scope.temp_styles[split[0]] = split[1]; 
            } 
            scope.Change = function(type) { 
                scope.styles.style[type] = scope.temp_styles[type]; 
            }; 
        } 
    }; 
}); 

很酷的动态双向样式绑定(bind)!

希望这对您有所帮助!