javascript - 让 ngClick 处理动态字段

Question

我似乎无法弄清楚为什么 ng-click 指令对复制的 DOM 元素不起作用。

这是 fiddle : http://jsfiddle.net/BkRqa/4/

我可以单击+插入新字段集，但用于删除添加的字段集的按钮不起作用。

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>

Controller

(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 中，但 Angular 不会对其进行编译。这意味着它们包含的指令尚未被解析，因此 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 服务注入(inject) Controller 。

此外，由于按钮是事件的目标，因此您需要更改删除函数以定位按钮的父级，以删除任何给定的克隆字段集:

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

演示: Here is a fiddle