angular和样式表之间的双绑定解决方案

A solution for two-binding between angular and a style sheet

本文关键字：绑定 解决方案 之间 样式 angular      更新时间：2023-09-26

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

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

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

js 美元的范围。Color {primary: '00f'， secondary: '#e58'}

我知道有很多像ng-style和ng-class这样的指令，但我担心每个标签都必须是一个指令，因为所有东西都可以有一个ng风格/ng类标签。这使得我的代码不是很枯燥，而且很难维护。

如果我想要一个css的动态样式指南呢?我可以将一个表作为CSS的键值对存储到像firebase这样的服务器中，甚至可以实时绑定颜色的变化?我很确定这不能完成单独使用角…有没有人对预编译器或黑客有任何想法来完成这项任务，这样就会产生一个干净的风格的家伙?

这是一个非常有趣的工作。

您可以通过document.styleSheets访问页面上的所有样式，因此您只需要对样式的规则进行作用域。比如我有这样一个类:

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

jsfiddle是如何实现表单的，这是添加到文档中的第三个样式表，所以我可以像这样分配作用域:

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'，它是红色的，它会重置为红色。

因此，我们为每个样式类型创建一个输入，使用temp的ng-model，然后监听更改并尝试将其分配给样式表。

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

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

酷，动态的双向绑定样式!

希望有帮助!

相关文章：