Javascript ng模型是否可以附着到样式标记？_Javascript_Html_Css_Angularjs

Javascript ng模型是否可以附着到样式标记？

javascript html css angularjs

Javascript ng模型是否可以附着到样式标记？,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我想用angularjs创建一个基本的模板编辑器，我想知道有没有可能创建一个带有ng模型的输入字段，并将该变量连接到一个样式标记上，以控制整个页面上的css，而不是在一个具有内联样式的特定元素上使用它？有可能这样做吗 <!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title>

我想用angularjs创建一个基本的模板编辑器，我想知道有没有可能创建一个带有ng模型的输入字段，并将该变量连接到一个样式标记上，以控制整个页面上的css，而不是在一个具有内联样式的特定元素上使用它？有可能这样做吗

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/angular.min.js"></script>
    <style>
        html, body { height:100%; margin:0; padding:0; }    
            div, ul, li, ol, span { margin:0; padding:0; }

    </style>
</head>
<body>
    <textarea type="text" ng-model="data.style" placeholder="enter style"></textarea>
</body>
</html>
<script>

    window.addEventListener('load', function(){

        var style = document.createElement('style');
        var textnode = document.createTextNode('{{data.style}}');
        style.appendChild(textnode);

        document.querySelector('head').appendChild(style);


    }, false)

</script>


文件
html，正文{高度：100%；边距：0；填充：0；}
div，ul，li，ol，span{margin:0；padding:0；}
addEventListener（'load'，function（））{
var style=document.createElement（'style'）；
var textnode=document.createTextNode（'{data.style}}'）；
style.appendChild（textnode）；
document.querySelector（'head'）.appendChild（样式）；
}，错）

您可以按需加载整个样式表，如下所示：

HTML

请参见

是的，您可以这样做，但您必须意识到其局限性。像这样的事情很好：

  <head>
    <style ng-bind="myStyle"></style>
  </head>

  <body>
    <h1>Type Style Here</h1>
    <textarea ng-model="myStyle"></textarea>
  </body>


在这里输入样式

但像这样的事情不是：

<head>
  <style>
   h1 { 
      background-color: {{color}}
   } 
  </style>
</head>

<body>
  <h1>Type Background Color Here</h1>
  <input ng-model="color" /> 
</body>


h1{
背景色：{{color}
} 
在此处键入背景色

如果您确实希望能够像上一个示例那样插入样式，则必须在其他地方（可能在控制器中）进行插入，然后绑定最终插入的字符串。{{color}}不起作用的原因是它将尝试在样式中添加非法的html节点，因为它假定它是html而不是css

以下是一个工作示例：

谢谢你，我真的很感谢你的帮助！我做到了，而且它与css一起工作，但出于某种原因，当我输入html时，它会将其作为字符串文本进行计算，例如，如果我在“输出”部分中键入“显示为文本”，它不会将变量作为标记在模型中进行计算，有没有办法修复它？必须使用ng bind html指令为此，我在搜索，它在这里说你使用ngSanitize，但我尝试了ng bind html，它不起作用，我必须创建一个模块吗？或者有更简单的方法吗？如果你使用angular 1.2.x之前的版本，你可以使用ng bind html不安全。如果你使用angular 1.2.0或更高版本，你可以使用ng bind html和$sce stuff将您的内容标记为安全的。这里有两个说明：如果您可以提供一个示例plunkr，说明您正在尝试执行的操作，那么将更容易帮助您实现它。

  <head>
    <style ng-bind="myStyle"></style>
  </head>

  <body>
    <h1>Type Style Here</h1>
    <textarea ng-model="myStyle"></textarea>
  </body>

<head>
  <style>
   h1 { 
      background-color: {{color}}
   } 
  </style>
</head>

<body>
  <h1>Type Background Color Here</h1>
  <input ng-model="color" /> 
</body>