angularjs - $compile 未在 Angular Controller 中定义

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

注意:我对你的controller做了一些改动，例如，没有必要把$compile放在你的函数中，因为它已经通过angular注入(inject)到controller上了。