从AngularJS控制器将HTML插入视图

斯丁JinJin2020-03-10

是否可以在AngularJS控制器中创建HTML片段并将该HTML显示在视图中？

这是因为需要将不一致的JSON Blob转换为嵌套的id : value对对列表。因此，在控制器中创建了HTML，现在我希望显示它。

我创建了一个模型属性，但是如果不打印HTML，就无法在视图中呈现它。

更新资料

看起来问题出在将创建的HTML角化为引号内的字符串而引起。将尝试找到解决此问题的方法。

控制器示例：

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

示例视图：

<div ng:bind="customHtml"></div>

给出：

<div>
    "<ul><li>render me please</li></ul>"
</div>

Pro小卤蛋A2020/03/10 21:42:50

在Angular 7 + ionic 4中，可以使用“ [innerHTML]”显示HTML内容：

<div [innerHTML]="htmlContent"></div>

希望对您有帮助。谢谢。

LEYJim2020/03/10 21:42:50

只需简单使用[innerHTML]，如下所示：

<div [innerHTML]="htmlString"></div>

在您需要使用之前ng-bind-html...

神乐Harry2020/03/10 21:42:50

您还可以使用ng-include。

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

您可以使用“ ng-show”来显示隐藏此模板数据。

小胖GO2020/03/10 21:42:49

只是通过遵循angular（v1.4）docs使用ngBindHtml做到了这一点，

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

确保在模块的依赖项中包括ngSanitize。然后它应该工作正常。

Tom神奇2020/03/10 21:42:49

在HTML上

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

要么

<div ng-bind-html="myCtrl.comment.msg"></div

在控制器上

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

也可以与 $scope.comment.msg = $sce.trustAsHtml(html);

Mandy伽罗2020/03/10 21:42:49

我今天尝试过，我发现的唯一方法是

<div ng-bind-html-unsafe="expression"></div>

Newest Answer