在Angular 2/4/5中从JavaScript添加动态HTML并绑定事件(Add dynamic HTML from JavaScript in Angular 2/4/5 and bind events)
我正尝试通过AJAX将新的HTML代码添加到Angular 5应用程序中，并将单击事件添加到元素。 但是，click事件不能按预期工作，我不能使用2种数据绑定方式，因为我使用的是jQuery数据表插件，并且他将HTML添加到Dom而不是角模板。
我努力了：
Click! this line does nothing
Click! this line said myClassFunction is undefined
Click! this line said myClassFunction is undefined
我怎样才能将这个点击事件绑定到我的函数？
I am trying to add new HTML code via AJAX to an Angular 5 app and add click event to the elements. But the click event doesn't work as expected, I can't use the 2 way data-binding way because I am using the jQuery data-tables plugins and he add the HTML to the Dom and not the angular template.
I have tried:
Click! this line does nothing
Click! this line said myClassFunction is undefined
Click! this line said myClassFunction is undefined
How can I bind this click event to my function?
原文：https://stackoverflow.com/questions/48283872
更新时间：2019-12-08 15:43
最满意答案
Angular是用Typescript写的。
当您提供或构建您的应用程序时，这个打字稿应用程序将被编译，缩小和简化为原生Javascript 。
这意味着你的
(click)="myClassFunction()"
将成为沿线的东西
οnclick="srgu.gferu()"
正如你所看到的，Angular不会意识到这一点。
使用JQuery或插件无关紧要： 这是Angular工作的方式 。
为此，您需要创建窗口函数或全局函数。
myClassFunction() {
// Create your window function, make it tslint compliant
window['myWindowClassFunction'] = () => {
// Your function's logic here
};
}
现在，在您附加的HTML中，您需要编写
Click!
Angular is written in Typescript.
When you serve or build your application, this typescript application is then compiled, minified and uglified to native Javascript.
This means that your
(click)="myClassFunction()"
Will become something along the lines of
οnclick="srgu.gferu()"
And as you can see, Angular won't recognize that.
It doesn't matter if you use JQuery or plugins : that is the way Angular works.
To do that, you will need to create window functions, or global functions.
myClassFunction() {
// Create your window function, make it tslint compliant
window['myWindowClassFunction'] = () => {
// Your function's logic here
};
}
Now, in your appended HTML, you need to write
Click!
相关问答
您可以向正文添加一个事件侦听器，它将处理指定约束的事件，如： document.querySelector('body').addEventListener('click', (event)=> {
if (event.target.id.toLowerCase() == `remove_${parameter.name}`) {
this.removeParameter(`${parameter.name}`);
}
});
注意：Angular2不鼓励直接访问
...
Angular是用Typescript写的。 当您提供或构建您的应用程序时，这个打字稿应用程序将被编译，缩小和简化为原生Javascript 。 这意味着你的 (click)="myClassFunction()"
将成为沿线的东西 οnclick="srgu.gferu()"
正如你所看到的，Angular不会意识到这一点。 使用JQuery或插件无关紧要： 这是Angular工作的方式 。 为此，您需要创建窗口函数或全局函数。 myClassFunction() {
// Create
...
你不应该(在通常的使用情况下)混合使用jquery和angular2，最好在dom中定义元素，但用* ngIf ...隐藏它们并绑定所有必要的属性。 更新：一些解决方法，但可以帮助你。 我不得不将一个庞大的项目(部分预jQuery代码)修改为angular2。 这是一个像组件结构的树(即使在那个时候)。 现在它是两种方法的混合体old_code / angular2。 你可以使代码如下： declare let window;
...
constructor() { window["my_uniq
...
为了添加动态内容，您必须为每个小部件创建自定义指令，然后在您的gridItems对象中引用它们，这些对象将在gridster网格上重复。 scope.standardItems = [{
title: 'Clock Widget',
settings: {
sizeX: 3,
sizeY: 3,
minSizeX: 3,
minSizeY: 3,
template: '',
...
首先感谢OP的问题。 我最终通过解答这个问题来学习新事物。 下面解释我如何实现。 重要提示：一个捕获不能将动态属性绑定到组件作用域 。 为了达到这个目的，你需要将每个div作为一个动态组件并编译它。 有点哈克我猜。 模板：
{{elm }}
并在组件导入中实现AfterViewInit和ViewChildren装饰器以获取子元素及其对渲染的更改：
...
将选项拆分为行并显示带有ng-repeat的选项。 JS $scope.b = [1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.rows = [];
for (var i=0; i < $scope.b.length; i+= 5) {
console.log(i)
$scope.rows.push($scope.b.slice(i, i+5))
}
HTML
...
Angular html-binding不完全信任插值表达式。 您需要使用$ sce service( https://docs.angularjs.org/api/ng/service/$sce )明确告诉它信任某个特定的表达式。 在你的控制器的某个地方你应该有这个片段： myhtml = $sce.trustAsHtml(myhtml);
Angular html-binding does not completely trust interpolated expressions. You
...
这是因为角度自动使用$ sce - > Strict Contextual Escaping。 它允许你使用ng-bind-html，但它不允许你添加像JS这样的恶意代码。 你所追求的是明确地将该段视为HTML。 因此： angular.module('app', ["ngSanitize"]) // You have to include ngSanitize or it wouldn't work.
.controller('Ctrl', function ($scope, $sce){
$
...
angular.bind使用指定的上下文创建包装函数。 它是Function.prototype.bind的对应部分，而不是Function.prototype.apply 。 angular.bind是从过去的日子开始的，当时JS库是自给自足的，而不是依赖于标准和polyfill(对jQuery和jQuery.proxy的致敬)。 这通常导致占地面积更小。 angular.bind和fn.apply不适用于new ed ES6类，如果符合大小写，最好坚持使用fn.bind 。 angular.b
...
对于动态templateUrl部分，您可以尝试： $routeProvider.when('/:group/:pagename', {
controller: "SomeCtrl",
templateUrl: function(params){return params.pagename + '.html';}
})
但是不确定控制器是否也可以这样做。 For the dynamic templateUrl portion you could try: $routeProvide
...
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
