Question

我试图克隆一个div标签，其中包含几个带有ng-click功能的HTML元素，

但动态克隆并追加HTML元素而不是触发ng-click功能，

任何人都可以帮助我

这是我使用的代码

a(String str)

Answer 1

我不知道你的HTML文件是怎样的，但我创建了一个例子。

看一眼：https://plnkr.co/edit/ZQ7EYw5CB3DojCKs7Qlv

HTML：

<div ng-controller="cabcontainer">
  <div id="cabdata">
    <p>Test1</p>
    <p>Test2</p>
  </div>
  <div id="cabcontainer">
    <p>Clone here</p>
  </div>
  <input type="button" ng-click="myFunc()" value="Clone"/>
</div>

JS：

angular.module('AddNewCab', [])

  .controller('cabcontainer', ['$scope','$compile', function($scope, $compile) {

    $scope.count = 0;
    $scope.myFunc = function() {

       $scope.count=$scope.count+1;
       var source = angular.element( document.querySelector( '#cabdata' ));
       var container = angular.element( document.querySelector( '#cabcontainer' ));

       var uniqueid='cabdata'+$scope.count;
       var temp= $compile(source.clone().attr('id',uniqueid))($scope);
       container.append(temp);
    };
  }]);

注意：我在您的控制器中进行了一些更改，例如，没有必要将$ compile放在您的函数中，因为它已经通过angular注入控制器。

Answer 2

如果我理解你，你想为动态创建的元素添加一个eventlistener吗？在这种情况下，我会使用jQuery而不是ng-click。喜欢

$("parentElement").on("click", "elementToClick", function() {
   //your code here
});

您可以使用angular指令执行相同操作，但jQuery更容易解释。如果您需要参数，可以将数据属性添加到元素中并使用

调用它们

this.getAttribute("data-AttributeName")

哦，如果您使用ng-attributes，请将它们设为数据-ng- *（例如数据-ng-点击）。不会给功能带来任何机会，但会使你的代码变得有效。

$ compile未在角度控制器中定义

2 个答案: