如何动态更改网页的内容和样式？

Question

我正在开发一个项目，我的要求是动态提供页面的内容，它将包含不同的div或表格，并且我需要在运行时为这些div传递样式，这些样式可以更改很多倍。我正在使用AngularJS进行该项目。我可以找到一些resource其中适用于该div的css的一个属性是使用ng-model传递的，但是我想传递我的整个CSS属性，该类的applicabe（可以是json）从页面的Textarea元素。

欣赏这方面的任何帮助。非常感谢 ！我的代码

部分看起来像：CSS我想传递的

<div ng-style="sampleStyle" class="col-md-6 ">{{sampleText}}</div> 

<textarea ng-model="sampleText" cols="40"> 
</textarea> 
<textarea ng-model="sampleStyle" cols="40"> 
</textarea> 

格式为：

{ 
color: xxx; background: xxx; font-size: xx; ... 
} 

Answer 1

尝试使用ng-class代替。

HTML：

<div ng-class="sampleStyle" class="col-md-6 ">{{sampleText}}</div> 
<textarea ng-model="sampleText" cols="40"></textarea> 
<textarea ng-model="sampleStyle" cols="40"></textarea> 

编辑：

动态绑定的样式文本的元素，你不能简单地用一个NG-模型，因为角度将它解释为一个字符串，不是一个对象。您需要首先使用$parse在范围上创建一个js对象，并从ng样式引用它。

HTML：

<div ng-class="myStyle" class="col-md-6 ">{{sampleText}}</div> 
<textarea ng-model="sampleText" cols="40"></textarea> 
<textarea ng-model="sampleStyle" ng-change="styleChangeFn()" cols="40"></textarea> 

JS：

app.controller('MainCtrl', ["$scope", "$parse", function($scope, $parse) { 
    $scope.styleChangeFn = function() { 
    $scope.myStyle = $parse($scope.sampleStyle)($scope); 
    } 
}]);