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

我试图克隆一个div标签，它包含很少的HTML元素，带有ng click功能

但动态克隆和附加的HTML元素不触发ng click函数

有人能帮我吗

这是我使用的代码

angular.module('AddNewCab', [])

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

    $scope.count = 0;
    $scope.myFunc = function($compile) {
        $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);
    };
  }]);

---

如果我理解的没错，您想向动态创建的元素添加eventlistener吗？在这种情况下，我将使用jQuery而不是ng click。差不多

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

对于angular指令也可以这样做，但是jQuery更容易解释。 如果需要参数，可以使用数据属性将它们添加到元素中，并使用

this.getAttribute("data-AttributeName")

---

哦，如果您使用ng属性，请将它们设置为data ng-*（例如data ng单击）。将不会给功能带来任何机会，但会使您的代码html有效。

我不知道您的html文件如何，但我创建了一个示例

看一看：

HTML:

---

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

谢谢Stefan，实际上我正在尝试克隆一个div标记并附加到另一个div container.append（source.clone（）.attr（'id'，uniqueid））；此源包含一个ng click函数（类似于添加新行图标）。新创建的行ng click没有触发，事件列表也没有从新创建的代码触发，不要建议人们使用不同的框架，因为它“更容易解释”…在这种情况下，我敢说我的答案是正确的。也许我应该再解释一下：$（“parentElement”）。在（“click”，“elementToClick”，function（）{}）上；parentElement是eventlistener绑定到的元素。使用始终存在的元素。如果没有其他人，就用尸体。“elementToClick”是eventlistener响应的元素。所以，如果我在（“单击”，“按钮”，function（）{alert（“Hello world”）；}）上写$（“body”）；如果使用类“button”单击某个元素，则始终会出现警报。但是eventlistener本身是在body上的。@Claies大多数人不知道angular是基于jquery构建的。如果在不使用jquery的情况下使用angular，angular.element是jquery轻型版本的别名。如果在angular之前在jquery中绑定，angular.element是jquery本身的别名。因此，这并不是一个完全不同的框架。使用jquery，您正在断开UI与模型的连接，在该函数中所做的任何事情都不会知道，也无法响应。仅仅因为angular在内部使用jQuery做一些事情并不意味着在事情不正常时使用jQuery而不是angular是一件好事。如果您正在定义控制器或任何其他类型的模块，您不需要在应用程序模块中插入

[]

。删除它：

angular.module（'AddNewCab'）。controller…

。谢谢Joel，我正在尝试一个类似的功能，但是这个克隆按钮必须在每个克隆上复制，Np@ravi，让我理解，你也要克隆按钮吗？是的Joel，非常感谢

<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>   

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);
    };
  }]);