AngularJS-具有功能的克隆元素
我有一个指令，其中我想克隆一个DOM元素，使其与所有绑定完全相同。当其中一个改变时，另一个也会改变。可能吗？我知道我必须以某种方式编译复制的元素，但它们是否与更改相互关联AngularJS-具有功能的克隆元素,angularjs,Angularjs,我有一个指令，其中我想克隆一个DOM元素，使其与所有绑定完全相同。当其中一个改变时，另一个也会改变。可能吗？我知道我必须以某种方式编译复制的元素，但它们是否与更改相互关联 angular.module('app').directive('test', function ($compile) { return { restrict: 'A', link: function (scope, element, attrs) { angular.element(document).r
angular.module('app').directive('test', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
angular.element(document).ready(function () {
var $header = angular.element(XXX).clone();
// $compile($header)(scope); // not sure about this one. it doesn't work
var $newHeader = angular.element(YYY).append($header);
}
}
});
下面是一个如何实现这一点的小例子 此示例使用带有
displayContenttestdivng单击指令，克隆它，更改它的内容并将它附加到我们的div父元素中
在附加此元素副本之前，需要对其进行编译，以便Angular能够识别其绑定
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<div test>
<p ng-click="ctrl.displayContent($event)">Dummy</div>
</div>
</body>
</html>
Dummy
script.js
angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
ctrl.displayContent = function($event) {
alert($event.currentTarget.innerHTML);
}
});
angular.module('app').directive('test', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
// Find <p> element inside our elment with `test` directive
var pElement = element.find('p');
// Clone <p>
var pElementCopy = pElement.clone();
// Change its content
pElementCopy.html("Foo");
// In order ng-click to work on this copy, you must compile it
// If you remove the following line, then ng-click won't work
$compile(pElementCopy)(scope);
element.append(pElementCopy)
}
}
});
angular.module（'app'，[]）；
角度.module（'app'）.controller（'SampleController'，function（$scope）{
var ctrl=this；
ctrl.displayContent=函数（$event）{
警报（$event.currentTarget.innerHTML）；
}
});
角度.module（'app'）。指令（'test'，函数（$compile）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
//使用'test'指令查找elment中的元素
var-pElement=element.find（'p'）；
//克隆
var pElementCopy=pElement.clone（）；
//更改其内容
html（“Foo”）；
//要使用此副本，您必须编译它
//如果删除以下行，则ng click将不起作用
$compile（pElementCopy）（范围）；
元素。追加（pElementCopy）
}
}
});
链接到plunker:谢谢您的回答。我需要一个额外的控制器吗？当我只使用have指令时，我在$compile函数中得到一个JS错误：TypeError:无法读取未定义的属性“$render”SampleController
仅用于演示目的。您可以删除它，并将子p
标记替换为Dummy
`另一个指令`可以是一个指令，例如显示工具提示。