如何在克隆事件绑定的同时克隆AngularJS节点？
在克隆事件绑定的同时克隆AngularJS节点，可以通过以下步骤实现：
- 使用AngularJS的
$compile服务将节点编译为可执行的AngularJS代码。 - 使用
clone()方法克隆节点，并将克隆的节点添加到DOM中。 - 使用
$compile服务对克隆的节点进行编译，以使其具有AngularJS的事件绑定和指令功能。 - 使用
$scope.$apply()方法将变更应用到克隆的节点上，以确保事件绑定生效。
下面是一个示例代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div id="originalNode" ng-click="onClick()">点击我</div>
<div id="cloneNode"></div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $compile) {
$scope.onClick = function() {
console.log('点击事件触发');
};
var originalNode = angular.element(document.getElementById('originalNode'));
var cloneNode = originalNode.clone();
// 编译克隆的节点
var compiledNode = $compile(cloneNode)($scope);
// 将克隆的节点添加到DOM中
angular.element(document.getElementById('cloneNode')).append(compiledNode);
// 应用变更
$scope.$apply();
});
</script>
</body>
</html>在上述示例中，我们首先定义了一个带有点击事件的原始节点originalNode，然后使用clone()方法克隆了该节点，并将克隆的节点添加到了cloneNode容器中。接下来，我们使用$compile服务对克隆的节点进行编译，使其具有AngularJS的事件绑定功能。最后，使用$scope.$apply()方法将变更应用到克隆的节点上，以确保事件绑定生效。
请注意，上述示例中使用的是AngularJS 1.x版本的代码，如果你使用的是AngularJS 2+版本或者其他框架，可能需要做相应的调整。
相关·内容
我有一个指令，我想在其中克隆应用该指令的元素。在指令的一种特定用法中，元素具有绑定了单击处理程序的按钮。我希望我的克隆元素也有这个click处理程序。然而，我所知道的克隆节点的传统方法对我不起作用。下面是我到目前为止尝试过的一个示例。请记住，此示例只是为了演示而简化，我的指令的最终目的不仅仅是克隆元素。element[0].af
浏览 0提问于2017-01-18得票数 0
1回答
我有不可见的TR行，由jQuery通过函数克隆(true，true)将其克隆为$cloned，但是TR中某些元素的onclick事件丢失了。然后，我通过以下方式添加到正确的表中：下一步要检查什么，或者要做什么来克隆事件
浏览 0提问于2019-06-22得票数 0
回答已采纳
有没有一种方法可以克隆AngularJS中的一个元素，并且它的绑定是完整的？<img ng-src="/some/{{image}}" ng-click="doStuff()" />
我希望克隆与此相同，与ng点击绑定</em
浏览 3提问于2013-11-11得票数 8
假设某些DOM节点(如<a>标记)与某些事件绑定，例如单击以打开弹出窗口或其他任何东西。但是我看不懂包含绑定内容的代码。我怎么把它们都解开？有什么简单的方法吗？再次更新：我用我的Chrome检查了Elements > Event Listeners，发现我的a上有一个单击事件处理程序，为了确保我是对的，我尝试了以下步骤：
首先，我从控制台手动添加了一个单击处理程序然后我用：
浏览 0提问于2016-01-13得票数 0
2回答
当我试图在jquery代码中使用克隆方法时，我会遇到一些问题。我在这里列出了我想要的和我面对的问题。首先，让我告诉您我想要什么，我希望当我单击add按钮时，我的代码应该克隆给id的元素，并使用remove按钮提供数据。()<table class="cloneelementtable"> <td>
<div class="
浏览 2提问于2013-06-27得票数 1
回答已采纳
3回答
当我克隆一个元素时，我的keyup绑定有问题。class="cost">10</span> <td> </td>我将一个keyup函数绑定到我的表行的.total',parent).t
浏览 0提问于2010-03-20得票数 3
回答已采纳
1回答
我试图通过将包含youtube播放器的iframe放到页面上不同位置的不同div中，但没有成功。即使我尝试用div包装iframe，并尝试移动div，它也不起作用。在视觉上，播放播放器不仅停止播放，而且恢复到显示定义播放器时设置的默认视频的图像。这是可能的吗，还是玩家自己正在做一些专门阻止这件事发生的事情？附注：在谷歌的群组中，我是唯一一个怀念旧YouTube社区的人吗？
浏览 2提问于2013-04-02得票数 1
2回答
我想复制列表项及其所有子元素，下面是我的示例代码。只有在第一个列表中，单击才起作用，重复列表的按钮不起作用 document.querySelectorAll(".btnMe").forEach(el => {
el.addEventListener
浏览 32提问于2020-11-05得票数 1
2回答
我在我的代码中有一个div，当我克隆它时，不会直接触发一个事件。attr('id', 'draggable2').appendTo("#here");</script>
然后，当我单击克隆的元素时，它将正常触发事件。").attr('id', '
浏览 0提问于2012-02-22得票数 4
}
}如您所见，代码正在克隆carousel scroll上的一个元素。问题是元素上的事件( jQuery .hide()和.show() )没有被触发，因为克隆没有克隆数据事件。我尝试设置clone(true)，但不起作用。它在克隆发
浏览 13提问于2016-08-19得票数 0
回答已采纳
.on()似乎没有绑定从clone()创建的新元素<div class="add">add</div>
$(".remove").onUpdate:请注意，我知道.clone()有两个参数，但是我不想让克隆的元素继续注册到旧的事件，而是一个新的，我可以使用.off()和.on(
浏览 8提问于2015-04-21得票数 2
回答已采纳
1回答
我正在寻找一种有效的方法来替换几个DOM元素-如果可能的话，只需一个操作。它是扩充TextNodes所必需的。如果存在某个单词，则应将其包装在span-Tags中，稍后需要为其分配一个事件处理程序。因此，如果文本节点包含它需要转换的单词至- span- #textNode
同时保持文档的其余部分不动。已知/假定的问题：- innerHTML会很快，但元素需要有一个
浏览 1提问于2010-07-03得票数 0
回答已采纳
2回答
获取克隆select的值
、、、
在克隆并执行onchange之后，我想获得select的类和值，但它只返回原始select的值。请在下面找到我的代码
<!
浏览 1提问于2013-06-12得票数 1
1回答
我使用jQuery的帮助用户输入诸如日期、邮政编码、电话号码等字段的有效输入(我还使用来确保表单不能提交，除非情况正确，并提供提示)。我看到了
浏览 3提问于2010-12-03得票数 1
1回答
我正在使用ObservableCollection来包装一些生成的实体框架对象。当用户想要编辑某些值时，我会打开一个包含字段的弹出窗口，当用户更改并按下保存时，更改将保存到数据库中，并且绑定的控件是更改，因为它是一个可观察的集合。为了防止用户在同一绑定对象上工作(这会导致每个绑定控件在同一时间进行可视化更改)，我想使用一些功能来克隆对象，然后分离原始对象，附加克隆对象，并将其保存到数据库。问题是克隆的</em
浏览 0提问于2010-10-06得票数 1
回答已采纳
当我添加HTML代码时，jQuery忽略了它的存在。$("td.elementToClick").click(...$("tr#myRowToAppend").append("<td class="elementToClick>...当jQuery在页面加载完成后关联事件时，我需要两种解决方案之一：-强制DOM在不更改当前布局的情况下重新搜索页面(我不希望刷新，所以loc
浏览 1提问于2009-05-10得票数 3
回答已采纳
我的任务是实现这个功能，当我单击一个按钮时，它会添加一个整行，这是我通过.clone()方法实现的。现在我想删除这个。当我点击十字按钮时，只删除那一行。如图所示：
当我点击十字，然后删除那条线。我的代码是： $(".abcd:last").注:仅删除选中了交叉线按钮的那一行。
浏览 2提问于2013-12-17得票数 5
回答已采纳
我试图将一个元素从DOM转换到一个指令中，然后通过改变它的样式或向它添加事件侦听器来影响这个已排除的元素。如果我使用transclude函数，我可以对克隆元素执行这些操作。我想AngularJS在如何处理这个问题上会有某种答案。我拍摄的最终结果是有一个指令，它将包装某种表单元素，一个<input>或<select>，并生成一个文本节点表示该节点的值。每当您单击该文本节点时，都会出现一个带有原始
浏览 2提问于2016-01-28得票数 0
回答已采纳
2回答
jQuery流沙问题
、、、
因此，我正在配置我的新wordpress网站上的，以便在我的投资组合部分使用它。我的站点上运行了更多的jQuery脚本。当我第一次运行该页面时，悬停图像是工作的，但是每当我触发排序流沙功能来过滤我的条目时，缩略图上的悬停图像效果就会停止工作，这真的很烦人。我想可能是因为jQuery的冲突什么的，但是我的任何尝试都没有奏效--在
浏览 4提问于2012-07-27得票数 1
5回答
我试过了它似乎没有复制我使用node.addEventListener("click", someFunc);添加的事件侦听器。
浏览 0提问于2013-03-14得票数 71
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
