有没有一种方法来转换角度活DOM成扁平普通的HTML?我的意思是把这个:
Is there a way to transform the angular "live DOM" to a flattened plain html? I mean turning this:
<!-- ngRepeat: ref in refs track by $index -->
<p ng_repeat="ref in refs track by $index" class="ng-scope ng-binding">a0120</p>
<p ng_repeat="ref in refs track by $index" class="ng-scope ng-binding">a0241</p>
<p ng_repeat="ref in refs track by $index" class="ng-scope ng-binding">z1242</p>
<p ng_repeat="ref in refs track by $index" class="ng-scope ng-binding">a0120</p>
这个:
<p>a0120</p>
<p>a0241</p>
<p>z1242</p>
<p>a0120</p>
当然,类的属性不相关的角度编译过程将被保留。
Of course, classes and attributes not related to angular compile process would be kept.
感谢
感谢
一个想最好的办法是只遍历DOM
A guess the best way is to just traverse the DOM
这里的code我使用的,如果有人想的使用它,改进它完全地或改变它...
Here's the code I'm using if someone want's to use it, improve it or change it completly...
的Attr和班级列表显然是不完整的。
The attr and class lists are obviously not complete.
function cleanAngularStuff(el) { //recursive function
var remClassList = ['ng-scope', 'ng-model', 'ng-binding', 'ng-isolate-scope']
var remAttrList = ['ng-repeat']
// If node is a comment just remove it
if (el.nodeType == 8) {
el.parentNode.removeChild(el);
}
// If its an element remove extra attributes and classes and recurse children
else if (el.nodeType == 1) {
// Remove extra classes. If none is left remove class attribute
for (var i = 0; i < remClassList.length; i++) {
el.classList.remove(remClassList[i]);
if (el.classList.length == 0) {
el.removeAttribute('class')
}
}
// Remove attributes
for (var h = 0; h < remAttrList.length; h++) {
el.removeAttribute(remAttrList[h])
}
// Recurse children
for (var i = 0, len = el.childNodes.length; i < len; i++) {
cleanAngularStuff(el.childNodes[i])
// If child comment is removed decrease cursor
if (len > el.childNodes.length) {
len = el.childNodes.length
i--
}
}
}
}