讓ngClick在動態字段上工作

Question

我似乎無法弄清楚爲什麼ng-click指令不適用於複製的DOM元素。

這裏是小提琴： http://jsfiddle.net/BkRqa/4/

我可以點擊+ Insert new fieldset，但按鍵刪除添加的字段集不工作。

HTML

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
     <div id="education"> 
      <button class="add-button" ng-click="cloneField($event)">+ Insert new field</button> 
      <!-- I want to make copies of .control-fieldset --> 
      <div class="control-fieldset"> 
       <div class="control-group"> 
        <label for="name_0">School</label> 
        <input type="text" name="name[0]" id="name_0"> 
        <!-- I want to remove copies of .control-fieldset --> 
        <button class="remove-button" ng-click="removeField($event)">-</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

控制器

(function() { 
    var myApp = angular.module('myApp', []); 

    myApp.controller('myController', ['$scope', function ($scope) { 

     $scope.cloneField = function (event) { 
      var fieldHtml = $(event.target).parent().find(".control-fieldset").first().clone(); 
      $(event.target).parent().append(fieldHtml); 
     }; 

     $scope.removeField = function (event) { 
      $(event.target).remove(); 
     } 
    }]); 
})(); 

Answer 1

克隆的字段被插入到DOM而不是由角編譯。這意味着它們包含的指令尚未被解析，因此ng-click不適用於克隆的元素。因此，編譯應手動完成：

$scope.cloneField = function (event) { 
    var fieldHtml = $(event.target).parent().find(".control-fieldset").first().clone(); 
    // Compile, then append the compiled element instead of the uncompiled 
    var compiledElement = $compile(fieldHtml)($scope); 
    $(event.target).parent().append(compiledElement); 
}; 

不要忘記注入$compile服務到控制器。

而且，由於按鈕是事件的目標，你需要改變你的刪除功能的目標按鈕的父，以消除任何給定的克隆字段集：

$scope.removeField = function (event) { 
    $(event.target).parent().remove(); // Remove the whole cloned element 
} 

演示：Here is a fiddle