1

我似乎无法弄清楚为什么该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();
        }
    }]);
})();
4

1 回答 1

4

克隆的字段被插入到 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
}

演示： 这是一个小提琴

于 2013-06-05T21:13:03.417 回答