我正在尝试将动态生成的html标签添加onclick事件到UI中,我使用的是角度2

时间:2016-07-31 15:03:50

标签: jquery typescript angular onclick dynamic-html

这是我的代码..

<i id="lrbp" #lrbp data-toggle="popover" [attr.data-content]="popovercontent" data-placement="bottom" (click)="openSettingPopOver(lrbp)" class="btn btn-default fa fa-cog fa-lg" aria-hidden="true"></i>

数据内容将在.ts文件中生成,例如

initPopOverContent(){
    this.popovercontent = "<ul class='list-group' style='margin:0'>" +
        "<li type='button' (click)='draw3D()' class='list-group-item'><i class='fa fa-cubes' aria-hidden='true'></i> 3D Chart</li>" +
        "<li type='button' class='list-group-item'><i class='fa fa-line-chart' aria-hidden='true'></i> Line Chart</li>" +
        "<li type='button' class='list-group-item'><i class='fa fa-pie-chart' aria-hidden='true'></i> Pie Chart</li>" +
        "</ul>";    
}

openSettingPopOver(id: any) {
    this.popover = id;
    let template: string = '<div class="popover" style="min-width:10em" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content" style="padding:0"></div></div>';

    $(id).popover({ html: true, template: template }).popover('toggle');
}

但点击事件

  

(点击)=&#39; draw3D()&#39; 此功能在.ts文件中

没有被调用。

我知道原因可能是动态地在角度2中附加html标签的不正确方法。

如果他们解决了类似的问题,任何人都可以帮助我。

1 个答案:

答案 0 :(得分:0)

不支持此功能。动态添加的HTML只是传递给浏览器并进行清理(被潜在危险的HTML,CSS,...剥离)但没有创建Angular2绑定或组件和指令。