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

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

有什么建议吗？

谢谢你这样做（没有操纵从控制器DOM）

来源

2015-05-24 Andrea Borgogelli Avveduti

https://docs.angularjs.org/api/ng/directive/ngBindHtml –

它是静态内容吗？ – charlietfl

是的，这是一个静态内容获取的帖子请求 –

一种方法是创建一个指令，然后使用angular.element（）。追加（）注入POST调用的HTML响应。

HTML

<remote-content></remote-content>

该指令将替换元件与所检索的HTML

注意：这是划线的情况下，以匹配该指令名称的驼峰，remoteContent - >远程内容

DIRECTIVE

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>标签，并获取其中的内容。

来源

2015-05-25 16:41:38 Brian

嗨，布赖恩，我已经尝试过类似的东西，但我怎样才能去掉所有样式表标签和其他垃圾？我认为“字符串替换”不是正确的方式，“正则表达式”太复杂了。你怎么看待这件事？你知道我是否可以将iframe标签与ng-src和ng-bind-html指令一起使用？ –

取决于你有多少“其他垃圾”。你可以在''这个字符串中找到位置，''的位置，然后用一些简单的数学方法就可以得到'.substring（）'用来得到''的innerHTML的索引。我不确定我从来没有尝试过的iframe。你是否需要任何样式或js来呈现内容？ – Brian

我不需要js来渲染内容，但需要css！ –

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

回答

相关问题