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

Question

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

但动态克隆并附加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);
    };
  }]);

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注入到控制器上.