当前位置: 首页 > 知识库问答 >
问题:

使用angular2将HTML从服务器插入DOM(angular2中的常规DOM操作)[副本]

刁英朗
2023-03-14

我试图编写一个HTML不安全的指令,它只是直接为元素的innerHTML分配一个值:

/// <reference path="../../typings/typings.d.ts" />

import {Directive} from 'angular2/angular2';
import {ElementRef} from 'angular2/core';


@Directive({
    selector: "[html-unsafe]",
    properties: ['htmlUnsafe']
})
export class HtmlUnsafe{
    constructor(private elem: ElementRef){

    }

    set htmlUnsafe(value){
        setTimeout(() => {
            this.elem.nativeElement.innerHTML = value;
        },0);
    }
}

所以现在在我的模板中,我有类似的内容

<td [html-unsafe]="my_data"></td>

这是可行的,但我不确定这是正确的方法,而setTimeout似乎是一个奇怪的变通方法。如果没有setTimeout,this.elem.nativeElement实际上并不引用DOM元素,而是引用某种临时元素。

共有1个答案

司马飞
2023-03-14

阅读本文http://www.beyondjava.net/blog/angularjs-2-0-sneak-preview-data-binding/from 2014年11月。

ng-bind-html变为[innerHTML]。

你可以用这个试试。

 类似资料:
  • 问题内容: 众所周知,使用AngularJS时必须在指令内操作DOM元素。 但是,在某些用例中,在服务内部操作DOM似乎是可以接受的。Misko Hevery在这里谈论这个。您还可以在Bootstrap UI对话框中 找到示例。 Misko的解释很模糊,所以我想知道如何确定何时需要将DOM放入服务而不是指令中。 问题答案: 指令及其定义方式始终附加在DOM节点上。因此,当您定义指令时,它会“扩展”

  • 我有大约2,000行HTML代码可以从我的Java服务器上检索。这个HTML代码内部还有一些角度指令,如和和。当我尝试使用以下方法在客户端中显示该HTML时: 我看到所有的HTML元素都显示正确,但没有一个角指令起作用(比如某些HTML应该用隐藏,但它们没有...而且事件都不起作用。我能做什么来修复这个问题呢? 我需要这个功能,因为我将我的代码作为一个JAR文件交付给不同的用户,以便在他们的本地机

  • 以下指令用于将应用程序数据绑定到HTML DOM元素的属性 - Sr.No. 名称和描述 1 ng-disabled 禁用给定的控件。 2 ng-show 显示给定的控件。 3 ng-hide 隐藏一个给定的控件。 4 ng-click 表示AngularJS单击事件。 ng-disabled Directive 将ng-disabled属性添加到HTML按钮并将其传递给模型。 将模型绑定到复选框

  • 大部分情况下你不需要通过查询 DOM 元素去更新组件的 UI,你只要关注设置组件的状态(setState)。但是可能在某些情况下你确实需要直接操作 DOM。 首先我们要了解 ReactDOM.render 组件返回的是什么? 它会返回对组件的引用也就是组件实例(对于无状态状态组件来说返回 null),注意 JSX 返回的不是组件实例,它只是一个 ReactElement 对象(还记得我们用纯 JS

  • jQuery的选择器很强大,用起来又简单又灵活,但是搞了这么久,我拿到了jQuery对象,到底要干什么? 答案当然是操作对应的DOM节点啦! 回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦,而且有的浏览器只有innerHTML,有的浏览器支持innerText,有了jQuery对象,不需要考虑浏览器差异了,全部统一操作! 修改Text和HTML jQuery对象的text()和html(

  • 由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。 始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作: 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容; 遍历:遍历该DOM节点下的子节点,以便进行进一步操作; 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点; 删