在 AngularJs 中的网页中显示 html 内容的最佳方式答案

【问题标题】：Best way to show html content inside a web page in AngularJs在 AngularJs 中的网页中显示 html 内容的最佳方式
【发布时间】：2015-08-06 02:58:03
【问题描述】：

在 AngularJs 应用程序的网页中显示 html 内容的最佳解决方案是什么？我必须通过发布请求来获取内容，所以我不能使用带有“src”属性的“iframe”标签来加载它。我想剥离一些 html 标签，例如“html”“head”“body”，然后将内容显示为“div”标签。但我不知道如何从字符串中删除一些 html 标签。

有什么建议吗？

谢谢

【问题讨论】：

docs.angularjs.org/api/ng/directive/ngBindHtml
是静态内容吗？
是的，它是通过发布请求获取的静态内容
"ng-bind-html" 仅适用于简单的 html 内容，但我想呈现一个完整的静态 html 页面。在这种情况下，“ng-bind-html”什么都不渲染所以我想我应该先去掉一些 html 标签，比如“body”“head”...
所以你已经探索过这个：iframe using ng-src and $sce 并且它根本不起作用？

标签： angularjs

【解决方案1】：

一种方法（无需从控制器操作 dom）是创建一个指令，然后使用 angular.element().append() 注入 POST 调用的 html 响应。

HTML

<remote-content></remote-content>

该指令将用检索到的 HTML 替换该元素

注意：这是 dash-case 以匹配指令名称的 camelCase，remoteContent -> remote-content

指令

app.directive('remoteContent', function($http) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {

      $http.post('/endpoint', {format:'html'}).
        success(function(html) {

          // remove wrapping html and body tags etc if necessary

          angular.element(element).append(html);

        }).
        error(function(data, status, headers, config) {

          alert("Could not fetch remote HTML");

        });

    }
  };
});

这是一个Plunkr，它显示了没有 $http.post 调用的 DOM HTML 注入。

由于 HTML 响应只是一个字符串，您可以使用 replace 查找包装标签并将其删除：

var content_html = html.replace(/<\/?(html|body)>/g, '');

但如果<head> 包含脚本标签之类的，则需要使用子字符串查找<body> 标签并获取其中的内容。

【讨论】：

嗨，Brian，我已经尝试过类似的方法，但是如何去除所有样式表标签和其他垃圾？我认为“字符串替换”不是正确的方法，“正则表达式”太复杂了。你怎么看待这件事？你知道我是否可以将 iframe 标签与 ng-src 和 ng-bind-html 指令一起使用？
取决于你有多少“其他垃圾”。您可以在<body> 的字符串中找到位置以及</body> 的位置，然后通过一些简单的数学运算，您可以推导出用于.substring() 的索引以获取<body> 的innerHTML。我不确定我从未尝试过的 iframe 事情。您需要任何样式或 js 来呈现内容吗？
我不需要js来渲染内容，但是需要css！
如果您需要发出 POST req 来获取您的内容，我认为使用 iframe 是不可能的 - 您需要一个 iframe 的 src 属性来加载内容，即一个 GET 请求，就像您使用了地址栏一样。使用 append(html) 方法，为了保持 CSS 样式，您可能需要将其添加到本地项目（其自己的 CSS 文件或附加到现有文件），以便在将 HTML 加载到指令元素中时它可以工作。