我如何美化在 AngularJS 中作为字符串返回的 XML

Posted 2023-03-05

【中文标题】我如何美化在 AngularJS 中作为字符串返回的 XML

【英文标题】：How do i prettify XML which is returned as a String in AngularJS

【发布时间】：2017-12-15 15:34:38

【问题描述】：

我的 html 如下所示，从 Angular 返回一些东西（我的 Angular 代码在下面）

<section>
    <p>xml</p>
</section>

在 Angular 中，我从 Java 后端获取这个“XML”作为字符串。

但我想使用以下插件美化它

https://github.com/krtnio/angular-pretty-xml

在将这个插件包含在我的 HTML 文件中后，我不知道如何使用它，因此我请求您的帮助。

app.controller('xmlController', function($scope, $http)

    $http.get("/api/xml").then(function (response) 
        $scope.xml = response.data; //I need to PRETTIFY IT HERE ON $scope.xml
     );

);

【问题讨论】：

为什么需要这样做？

也许是dzone.com/articles/visualizing-xml-graph-using

它是滤镜，应该是<p>xml|prettyXml</p>，但这是在黑暗中拍摄，目前我无法尝试。

@WuDo 我在尝试时遇到错误。 errors.angularjs.org/1.5.7/$injector/…

我在这里发现了很多有趣的解决方案：***.com/questions/31857502/…

【参考方案1】：

嗯，我认为你在安装过程中遗漏了一些东西。

首先你必须在你的应用上安装这个包：

通过鲍尔：

bower install angular-pretty-xml --save

通过 npm：

npm install angular-pretty-xml --save

确保将其包含在您的 html 文件中 中的 script 标记内（除非您使用一些自动打包系统，如 webpack 或其他为您捆绑它的东西），这样您就可以将其添加为您的 Angular 模块声明的依赖项，如下所示：

angular
    .module('myApp', ['prettyXml'])
    .controller('xmlController', function($scope, $http)

        $http.get("/api/xml").then(function (response) 
            $scope.xml = response.data; //I need to PRETTIFY IT HERE ON $scope.xml
        );
    );

这样您就可以像这样在模板上使用过滤器：

<p> xml | prettyXml</p>

参考资料：

angular-pretty-xml