Javascript 如何使用Angular JS创建可复制的html代码

我有一个称为节的对象数组。每个对象（节中的节）都具有诸如

name

、

cssclass

等属性。例：

    $scope.sections = [
                     { title 'first section', cssclass: 'red'},
                     { title: 'second section', cssclass: 'blue'}
                     ];

在视图中输出任何用户都可以复制的HTML代码的最佳方式是什么？
例如，我们假设它的输出是精确的

<section class="red"> <h1> first section </h1></section>
<section class="blue"> <h1>second section</h1></section>`

第一节
第二节`

依此类推，以循环分区数组可能具有的所有对象

---

再一次澄清一下，我想要一个文本区（或类似的东西），其中html没有被处理，而是以原始形式显示给用户

可以使用$compile中的“pass”任意进行指令处理，然后对angularJS生成的html执行任何操作。此外，必须根据用户对新元素的模型输入提供唯一的作用域，这可以通过$rootScope.$new（）实现。在下面的示例中，模型格式应为JSON，因此它不喜欢、分解，但如果创建此模型供个人使用，则可以允许简单的JS输入并使用eval（），从而允许用户编写更复杂的模型

这就是它的作用：

var module=angular.module（'module'，[]）；
指令（'xxangulazer'，函数（$compile，$rootScope）{
返回{
限制：“A”，
模板：“模板”+
“模型”+
“HTML输出”+
'',
范围：正确，
链接：功能（$scope，elem）{
var templateElem=$（elem.find（'#template'）；
var modelElem=$（elem.find（'#model'）；
var outputElem=$（elem.find（'#output'）；
var hiddenElem=$（elem.find（'#hidden'）；
$scope.template='{{cat.name}}著名的{{{cat.breed}}'；
$scope.model='{“cats”：[{“name”：“Fussy”，“bread”：“俄罗斯蓝”}，'+
“{”名字“：”杜松“，”品种“：”缅因州库恩“}，'+
“{”名称“：”韭菜“，”品种“：”家养短毛“}]}”；
$scope.output=''；
$scope.update=更新；
var$magicScope；
函数更新（）{
var模型，模板；
试一试{
model=JSON.parse（$scope.model）；
}捕捉（错误）{
model=null；
$scope.output='模型不是有效的JSON'；
}
if（型号）{
试一试{
模板=$（$scope.template）；
}捕捉（错误）{
控制台日志（err）；
模板=null；
$scope.output='模板不是有效的（ish）HTML'；
}
}
如果（模板）{
如果（$magicScope）{$magicScope.$destroy（）；}
$magicScope=$rootScope.$new（true）；
对于（模型中的var p）{
$magicScope[p]=模型[p]；
}
//$scope.$apply（函数（）{
$compile（hiddenElem.html（模板））（$magicScope）；
//});
//$scope.$apply（函数（）{
//$scope.output=hiddenElem.html（）；
//});
setTimeout（函数（）{
$scope.output=hiddenElem.html（）；
$scope.$apply（）；
}, 500);
}
}
$scope.$watch（'模板'，更新）；
$scope.$watch（'型号'，更新）；
设置超时（更新，500）；
}
};
});

我不太清楚这与Angular有什么关系，也不清楚sections对象的确切结构对所有这些都有什么影响。我想如果你把问题缩小一点，再更新一点，你会得到更好的帮助，现在更清楚了吗？请原谅我的英语，我是阿根廷人！