从AngularJS控制器将HTML插入视图

JavaScript

斯丁JinJin

2020-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>

第510篇《从AngularJS控制器将HTML插入视图》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
Pro小卤蛋A 2020.03.10

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

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

希望对您有帮助。谢谢。

LEYJim 2020.03.10

只需简单使用[innerHTML],如下所示:

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

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

神乐Harry 2020.03.10

您还可以使用ng-include

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

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

小胖GO 2020.03.10

只是通过遵循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

在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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android