Question

我想使用angularjs创建基本模板编辑器，我想知道是否可以使用ng-model创建输入字段，并将该变量连接到样式标记以控制整个页面上的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>

Answer 1

您可以按需加载整个样式表：

HTML

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">

  <head>
    <script data-require="angular.js@1.2.4" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" ng-href="{{styleHref()}}" />
    <script src="script.js"></script>
  </head>

  <body >
    <div class="box"></div>
    <textarea ng-model="data.style"></textarea>
  </body>
</html>

JS

angular.module('myApp', [
    ]).
    controller('myCtrl',function($scope) {
      $scope.data = { style: "style-1" }; // can come from init func, http call, etc
      $scope.styleHref = function() { return $scope.data.style + ".css"; };
    });

请参阅this plunkr as an example

Answer 2

是的，你可以这样做，但你必须意识到这些限制。这样的事情很好：

  <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>

如果你想要能够像上一个例子一样插入样式，你必须在其他地方进行插值（或许在你的控制器中，然后绑定最终的插值字符串。原因是“{{color}}”不会起作用的是它会尝试在样式中添加非法的html节点，因为它假定它是在html而不是css。

这是一个有效的例子：

http://plnkr.co/edit/PoRKwfBI9MtnakHvUU7Y?p=preview

ng-model可以附加到样式标签吗？

2 个答案: