Question

我写了一个使用angularjs进行数据绑定的应用程序该应用程序是某种可视化HTML构建器用户完成后，我想允许他导出HTML 由于我在angularjs中进行了大量使用，因此它的属性遍布整个地方，并且生成的HTML很难看。

无论如何都要获得HTML的干净版本？这个例子将导出丑陋的html：http://jsfiddle.net/ga25hep2/

<div ng-app="myApp">
<div id="the_html" ng-controller="MyCtrl">
  Hello, {{name}}!
</div>
<button onclick='exportMe()'>export</button>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}

function exportMe(){
    alert(document.getElementById('the_html').outerHTML)
}

Answer 1

如果你可以在1.3之后更新角度（你真的应该，还有很多其他的好处），那么你可以通过在应用程序中禁用调试信息来禁用所有ng-类垃圾邮件：

myApp.config(function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
});

您可以在更新的小提琴here中看到结果。

请注意，我稍微更改了结构，但功能相同。

Answer 2

我认为它不存在本地方式。 AngularJS不是关于这种工作的。

只需编写一个脚本来解析导出的代码并删除每个ng- *属性

Answer 3

我们需要遍历所有dom节点并删除ng相关属性和ng相关类。

function exportMe(){
    var targetEl = document.getElementById('the_html');
    var nodes = targetEl.querySelectorAll('*');

    nodes = Array.prototype.slice.call(nodes); // convert NodeList to array
    nodes.unshift(targetEl); // include the root node while iterating.

    nodes.forEach(function (node) {
        Array.prototype.slice.call(node.attributes).forEach(function (attr) {
            var classes = Array.prototype.slice.call(node.classList); // conver classList to array
            classes = classes.filter(function (cls) {
                return !(cls.indexOf('ng-') === 0 || cls.indexOf('data-ng-') === 0);
            });

            // remove ng related classes
            node.setAttribute('class', classes.join(' '));

            // remove ng related attributes
            if(attr.name.indexOf('ng-') === 0 || attr.name.indexOf('data-ng-') === 0) { 
                node.removeAttribute(attr.name);
            }
        })
    });    
    alert(targetEl.outerHTML)
}

这是一个解决方案：http://jsfiddle.net/ga25hep2/2/

如何在angularjs中获取干净版本的html

3 个答案: