AngularJS $http HTML 解析器答案

【问题标题】：AngularJS $http HTML ParserAngularJS $http HTML 解析器
【发布时间】：2012-10-19 21:58:36
【问题描述】：

所有，我们正在使用 AngularJS 开发一个 webapp，并且我们有一个用例/需求（根本不会经常发生），我们需要从我们的静态服务器中检索一个完整的 HTML 文档。但是，$http 对象似乎返回了一个原始 HTML 字符串作为其“数据”。我们试图避免使用外部库（例如 jQuery），但我们需要将原始 HTML 字符串解析为可查询的 DOM 对象。我们可以使用 iframe 并完成它，但出于众所周知的原因，我们也在努力避免使用 iframe。

那么，问题是：AngularJS 是否有 HTML 解析器（就像它对 JSON 一样）？否则，处理这种情况的最优雅的方式是什么？

P.S.：我们尝试过筛选 Angular 的 API 文档，但老实说，它们是偶然的，而且浏览起来不直观。

【问题讨论】：

似乎没有像带有angularJS的json这样的html解析器。如果您不想使用 iframe（我也会避免使用），您可以将结果 html 放入页面的隐藏 div 中，然后像其他元素一样使用它。
jQuery 在技术上并不是一个额外的库。 Angular 在其中使用了 jQuery lite。
@maxisam 所以……这很有趣。我们将如何使用捆绑的 jQuery？通过 $() 还是 window.jQuery()？谢谢。
我的意思是如果你想使用jquery选择器，你仍然需要包含jQuery。
AngularJS 1.2.0 ngBindHtml and trustAsHtml not working with ngModel的可能重复

标签： javascript angularjs

【解决方案1】：

如果您需要以编程方式从字符串中获取 DOM 元素，将 html 解析为 DOM 对象非常简单。

基本上你会使用 DOMParser。

var parser = new DOMParser();
var doc = parser.parseFromString('<div>some html</div>', 'text/html');
doc.firstChild; //this is what you're after.

如果您想使用 vanilla JS 查询以从中获取元素（意思是，由于某种原因您不想使用 JQuery），您可以这样做：

//get all anchor tags with class "test" under a div.
var testAnchors = doc.firstChild.querySelectorAll('div a.test');

...但请注意：querySelectorAll 仅在 IE8 及更高版本中受支持。

编辑：其他方法...

“包装”方法：

var div = document.createElement('div');
div.innerHTML = '<div>some html</div>';
var result = div.childNodes;

... 请注意，如果您将 SVG 或 MathML 放入该方法，该方法将返回 HTMLUnknownElements。它们会“看起来”正常，但它们不会起作用。

【讨论】：

【解决方案2】：

首先，Angular 也使用 jQuery。 (jQuery 精简版)

来自FAQ

Angular 是否使用 jQuery 库？

是的，如果 jQuery 存在于您的应用程序中，Angular 可以使用应用程序正在被引导。如果 jQuery 不存在于您的脚本路径，Angular 回退到它自己的实现 jQuery 的子集，我们称之为 jQLite。

不过，我认为你在这里并不需要完整的 jQuery 函数。

我就是这么做的。

我使用指令并将 html 作为模板并将替换设置为 true。

jsFiddle

<myhtml></myhtml>

angular.module('myApp', []).directive('myhtml', function($http) {


    return {
        restrict: 'E',
        scope: {},
        template:'',
        link: function(scope, element, attrs) {
           $http.post('/echo/json/', data).success(function(re) {
               element.html(re.html);
        });
    }
    }
});

编辑注释：

我只是更新了 jsFiddle。

我在顶部包含 jquery 以在 jsFiddle 中回显请求。实际上，你不需要那个。

不过，它表明你可以在 Angular 中使用 jQuery。

如果您的 html 不包含任何 angular 标签，则此示例应如您所愿。

否则，您需要使用 compile 而不是 link。

【讨论】：