javascript AngularJS $http HTML 解析器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13141080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS $http HTML Parser
提问by rdodev
All, we're developing a webapp with AngularJS and we have a use case/requirement (that won't happen very often at all) where we will need to retrieve a complete HTML document from our static server. However, it appears that the $http object returns a raw HTML string as its 'data'. We are trying to avoid using an external library (like jQuery, for instance), but we need to parse that raw HTML string into a queriable DOM object. We could use an iframe and be done with it, but we're also trying to avoid using iframes for well-known reasons.
总而言之，我们正在使用 AngularJS 开发一个 web 应用程序，我们有一个用例/需求（这根本不会发生），我们需要从我们的静态服务器中检索一个完整的 HTML 文档。但是，似乎 $http 对象返回原始 HTML 字符串作为其“数据”。我们试图避免使用外部库（例如 jQuery），但我们需要将原始 HTML 字符串解析为可查询的 DOM 对象。我们可以使用 iframe 并完成它，但出于众所周知的原因，我们也试图避免使用 iframe。
So, the question is: does AngularJS have a parser for HTML (as it does for JSON)? Or else, what's the most graceful way to handle this case?
所以，问题是：AngularJS 有 HTML 解析器吗（就像 JSON 一样）？或者，处理这种情况最优雅的方式是什么？
P.S.: We tried sifting through Angular's API docs, but in all honesty they are hit-or-miss and unintuitive to navigate around.
PS：我们尝试过筛选 Angular 的 API 文档，但老实说，它们是命中注定的，而且导航不直观。
回答by Ben Lesh
If you need to get a DOM element from the string programmatically, parsing html into a DOM object is pretty simple.
如果您需要以编程方式从字符串中获取 DOM 元素，将 html 解析为 DOM 对象非常简单。
Basically you'd use DOMParser.
基本上你会使用 DOMParser。
var parser = new DOMParser();
var doc = parser.parseFromString('<div>some html</div>', 'text/html');
doc.firstChild; //this is what you're after.
From there if you wanted to query to get elements from it with vanilla JS (meaning, you don't want to use JQuery for some reason), you can do this:
从那里，如果您想使用 vanilla JS 查询以从中获取元素（意思是，您出于某种原因不想使用 JQuery），您可以这样做：
//get all anchor tags with class "test" under a div.
var testAnchors = doc.firstChild.querySelectorAll('div a.test');
... but note: querySelectorAllis only supported in IE8 and higher.
...但请注意：querySelectorAll仅在 IE8 及更高版本中受支持。
EDIT: additional approach...
编辑：额外的方法...
The "wrap" method:
“包装”方法：
var div = document.createElement('div');
div.innerHTML = '<div>some html</div>';
var result = div.childNodes;
... do note that this method will return HTMLUnknownElements if you put SVG or MathML into it. They'll "look" normal, but they won't work.
...请注意，如果您将 SVG 或 MathML 放入该方法中，它将返回 HTMLUnknownElements。他们会“看起来”正常，但他们不会工作。
回答by maxisam
First of all, Angular uses jQuery as well. (jQuery lite)
首先，Angular 也使用 jQuery。(jQuery 精简版)
From FAQ
来自常见问题
Does Angular use the jQuery library?
Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.
Angular 是否使用 jQuery 库？
是的，如果在应用程序启动时 jQuery 存在于您的应用程序中，Angular 可以使用它。如果 jQuery 不存在于您的脚本路径中，Angular 将回退到我们称为 jQLite 的 jQuery 子集的它自己的实现。
However, I think you don't need full jQuery function here anyway.
但是，我认为无论如何您都不需要完整的 jQuery 功能。
That is what I did.
这就是我所做的。
I use a directive and get the html as template and set replace as true.
我使用指令并将html作为模板并将替换设置为true。
<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);
});
}
}
});
Edit note:
编辑注释：
I just update the jsFiddle.
我只是更新了 jsFiddle。
I include jquery on top for echoing the request in jsFiddle. In real, you don't need that.
我在顶部包含 jquery 以在 jsFiddle 中回显请求。实际上，您不需要那个。
However, it shows you that you can use jQuery in Angular.
但是，它表明您可以在 Angular 中使用 jQuery。
If your html doesn't contain any angular tag, this example should work as your expectation .
如果您的 html 不包含任何 angular 标签，则此示例应该按您的期望工作。
Otherwise, you need to use compileinstead of link.
否则，您需要使用compile而不是link。
