角和样式表之间，一种溶液两装订 [英] A solution for two-binding between angular and a style sheet

问题描述

我知道这听起​​来很愚蠢，但我正在写一个所见即所得的编辑器，允许设计人员创建风格指南。我已经变得非常着迷，2路在角装订，很好奇，如果有可能的CSS表和 NG-模型输入字段之间的双向绑定。目前，我正在做一个动态的风格指南，允许设计者colorpick页面的小学，中学的色彩。这些颜色会均匀改变整个网站的主题，这将是真棒，从样式表本身。

I know this sounds silly but I'm writing a wysiwyg editor that allows Designers to create style guides. I've become very fascinated with 2 way binding in angular and was curious if it was possible to two-way bind between a css sheet and a ng-model input field. Currently, I'm making a dynamic style guide that allows a designer to colorpick a primary, secondary colors of a page. These color will change the entire theme of the site uniformly and it would be awesome to do this from the stylesheet itself.

HTML

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

CSS

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

JS
    $ {scope.color小学：00F，二级：＃E58'}

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

我知道有很多指令，如 NG-风格和纳克级但我担心，每一个标签必须是一个指令，因为一切都可以有一个NG式/ NG级标记。因此，让我的code不是很干硬维护。

I know there are plenty of directives like ng-style and ng-class But I fear that every tag will have to be a directive because everything could have an ng-style/ng-class tag. Thus making my code not very dry and hard to maintain.

如果我想CSS的动态风格指南。我能CSS作为键值对存储到像火力服务器的工作表，甚至3WAY绑定颜色实时变化？我是pretty肯定，这不能仅仅使用的角度来完成......会有人对pre编译器或破解任何想法来完成这个任务，这样会导致一个清新的风格家伙？

What if I wanted a dynamic style guide of css. A sheet that I could store as key value pairs of CSS into server like firebase, perhaps even 3way bind the changing of colors in real time? I'm pretty sure this cannot be accomplished using solely angular... would anyone have any ideas on pre compilers or hacks to accomplish this task so that it would result in one clean style guy?

推荐答案

这是pretty乐趣去努力。

This was pretty fun to work on.

您必须通过 document.styleSheets 访问所有的页面上的样式，所以你只需要在范围风格的规则。因此，可以说，我有这个类：

You have access to all of the styles on a page through document.styleSheets, so you just need scope the rules on a style. So lets say that I have this class:

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

如何的jsfiddle工具表，这是第三个样式表添加到文档中，这样我就可以只分配给这样的范围：

How jsfiddle implements sheets, this is the third style sheet added to the document, so I can just assign to the scope like this:

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

这会让你不喜欢的东西 $ scope.styles [0] .style ['颜色'] ='红'来的带班什么改变颜色红。由于它的风格数组中的第一件事情。

This would let you do things like $scope.styles[0].style['color'] = 'red' to change the color of anything with class to red. Since it's the first thing in the style array.

但是，这并不足够的冷静，所以我们要创建一个指令，我们可以从UI改变这些。所以，我们想知道这一切类控制，为他们创建控件的事情，所以我们可以操纵的CSS串来获得所有这些。

But that's not cool enough, so we want to create a directive where we can change these from a ui. So we'd like to know all of the things that class controls, to create controls for them, So we can manipulate the css string to get all of those.

接下来我们要创建与所有的风格开始了该指令的临时范围内的对象。其原因是样式表有检查，这样你，如果你做类似 $ scope.styles [0] .style输入到输入['颜色'] ='G'，它是红色的，它只会重置为红色。

Next we have to create a temporary scoped object on the directive that starts off with all of the styles. The reason is that style sheets have checking, so as you type into an input if you do something like $scope.styles[0].style['color'] = 'g' and it was red, it will just reset to red.

因此​​，我们为每一个风格类型的输入，用我们的温度的NG-模型，然后只听更改并尝试分配给样式表。

So we create an input for each style type, with ng-model of our temp, then just listen for changes and attempt to assign to the style sheet.

我创建了一个小提琴，我实现它，但该指令看起来是这样的。

I created a fiddle where I implement it, but the directive looks like this.

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

酷的，动态的双向的风格结合！

Cool, dynamic two way binding of styles!

希望这有助于！

这篇关于角和样式表之间，一种溶液两装订的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！