1. 首页
  2. 问题
  3. JavaScript 从AngularJS控制器将HTML插入视图
一尘不染

JavaScript 从AngularJS控制器将HTML插入视图

javascript

是否可以在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>

阅读 419

收藏
2020-04-23

共1个答案

一尘不染

对于Angular 1.x，ng-bind-html在HTML中使用：

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

此时，您将得到一个attempting to use an unsafe value in a safe context错误，因此您需要使用ngSanitize或$sce来解决该问题。

$ sce

$sce.trustAsHtml()在控制器中使用以转换html字符串。

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ng消毒

分两个步骤：

  1. 包括angular-sanitize.min.js资源，即：
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. 在js文件（控制器或通常为app.js）中，包含ngSanitize，即：
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

2020-04-23