Question

我似乎无法弄清楚为什么ng-click指令不能处理复制的DOM元素。

我可以点击+ 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但不是由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服务注入控制器。

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

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

演示： Here is a fiddle

获取单击以处理动态字段

1 个答案: