6

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

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

PS：我们尝试过筛选 Angular 的 API 文档，但老实说，它们是命中注定的，而且导航不直观。

4

2 回答 2

12

如果您需要以编程方式从字符串中获取 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。他们会“看起来”正常，但他们不会工作。

于 2012-10-30T15:46:59.417 回答
3

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

来自常见问题

Angular 是否使用 jQuery 库？

是的，如果在引导应用程序时，Angular 存在于您的应用程序中，则 Angular 可以使用 jQuery。如果 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。

于 2012-10-30T14:46:30.850 回答