当前位置: 首页 > 面试题库 >

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

席安康
2023-03-14
问题内容

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

问题答案:

对于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'])



 类似资料:
  • 问题内容: 是否可以在AngularJS控制器中创建 HTML 片段并将该HTML显示在视图中? 这是因为需要将不一致的JSON Blob转换为嵌套的对对列表。因此,在控制器中创建了 HTML ,现在我希望显示它。 我已经创建了模型属性,但是如果不打印 HTML 便无法在视图中呈现它。 更新资料 看来问题出在将创建的HTML角化为引号内的字符串而引起。将尝试找到解决此问题的方法。 控制器示例: 示

  • 问题内容: 我所知道的是,当我想在视图中插入HTML时,我使用或。 我不知道的是如何插入HTML并使Angular解析其内容 即如果有,我想Angular解析吗? 更新1: 例: HTML: JS: 我尝试使用上面的方法,但是Angular 还是按原样打印。 问题答案: 您可以使用服务(docs)将任意HTML编译为角度视图。 在这种情况下,我已经将视图附加到了(这是引导模块时使用的元素,通常是通

  • 问题内容: 我已经为此寻找了很多,但我要么找不到答案,要么听不懂。一个具体的例子将赢得投票=) 我有一个返回HTML字符串的函数。 我无法更改功能。 我希望将由字符串表示的html插入到DOM中。 我很高兴使用控制器,指令,服务或其他任何可行的方法(并且是合理的良好做法)。 免责声明:我不太了解$ compile。 这是我尝试过的: 那没用。 我也尝试将其作为指令: 帮帮我? 问题答案: 基本上,

  • 问题内容: 我正在尝试使用AngularJS 的 ng-click 功能来切换视图。我将如何使用下面的代码来做到这一点? index.html controller.js 问题答案: 为了在不同的视图之间切换,您可以直接在index.html文件中更改window.location(使用$ location服务!)。 Controller.js 并配置路由器以根据位置切换到不同的部分(如此处所示h

  • 问题内容: 我已经用AngularJS编写了一个服务,但是我无法使其与角度种子处理方式一起使用。 控制器代码如下: 请注意,注释掉的部分工作正常,但我想像(推荐的)第二种方式来处理它。 我得到的错误是照片是未定义的,所以我的猜测是我传递(注入)它的方法是错误的,但是我找不到正确的方法 问题答案: 您需要定义服务: 一些参考: http://docs.angularjs.org/api/angula