在AngularJS中相同指令的按钮的ng-click上将HTML添加到指令中

Question

我想在单击“添加其他行”按钮时向 div“#rowContainerXXX”添加另一行。我想我必须使用“$compile”编译指令的新 html。我尝试了几个从堆栈溢出的链接来实现这一目标，但未能成功。我尝试了两种不同的方法。一种使用链接函数概念，另一种是编译函数。请指导我通过一些概念来实现我的目标。我实现添加新行的方式在没有链接和编译功能的情况下工作正常。但问题是“ng-click=removeRow()”不适用于新添加的行。 “removeRow”仅适用于指令的第一行。任何帮助表示赞赏。

这是指令的 HTML

<div class="contactItem">
    <h3>{{contact.title}}<span class="required-field">*</span></h3>
    <div class="item">
        <div id="item-header">
            <span class="dataText">Name</span>
            <span class="dataText">Role/Title</span>
            <span class="dataText">Email</span>
            <span class="dataText">Phone</span>
        </div>

    </div>
    <div class="item" id="rowContainer{{contact.id}}">
        <div id="row{{contact.id}}_0">
            <input class="dataItem" type="text" ng-model="contact.name" />
            <input class="dataItem" type="text" ng-model="contact.role" />
            <input class="dataItem" type="email" ng-model="contact.email" />
            <input class="dataItem" type="text" ng-model="contact.phone" />
            <input class="dataItem lastHidden" type="button" ng-click="removeRow()" value="Remove" />
        </div>
    </div>
    <div class="item">
        <div class="addContactButton">
            <input type="button" ng-click="addRow(contact.id)" value="Add additional Row" />
        </div>
    </div>
</div>

这是指令的Java脚本

   app.directive('contactItem', function ($compile) {
    var rowId = 1;
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'templates/directives/contactItem.html',
        scope: {
            contact: '=',
        },
        controller: function ($scope) {
            $scope.addRow = function (rowContainerID) {
                var containerID = "#rowContainer" + rowContainerID;
                var rowContainer = $(containerID);
                var row = $("#row" + rowContainerID + "_0").html();
                var newRow = "<div id=\"row" + rowContainerID + "_" + rowId + "\">" + row + "</div>";
                //$compile(newRow)($scope);
                rowContainer.append(newRow);
                rowId++;
                var rows = $(containerID).children();
                if (rows.length > 1) {
                    $(containerID + " .lastHidden").addClass("last");
                    $(containerID + " .lastHidden").removeClass("lastHidden");
                }
                //console.log($(containerID).html());
                //$compile($(containerID).html())($scope);
            };

            $scope.removeRow = function () {
                console.log("Remove called");
            };
        },
        //link: function (scope, ele, attrs) {
        //    scope.$watch('rowId', function (html) {
        //        ele.html(html);
        //        $compile(ele.contents())(scope);
        //    });
        //},
        compile: function (element, attrs) {
            return function (scope, element, attrs) {

                console.log(element.contents());
                $compile(element.contents())(scope);
            };
        },
    }
});

Answer 1

只需将联系人存储在数组中并 ng-repeat 即可。因此，当您想添加行时 - 您只需将 .push(row) 放入数组中。它会出现。

<div class="item" id="rowContainer{{contact.id}}">
    <div ng-repeat="contact in contacts" id="row{{contact.id}}_0">
        <input class="dataItem" type="text" ng-model="contact.name" />
        <input class="dataItem" type="text" ng-model="contact.role" />
        <input class="dataItem" type="email" ng-model="contact.email" />
        <input class="dataItem" type="text" ng-model="contact.phone" />
        <input class="dataItem lastHidden" type="button" ng-click="removeRow()" value="Remove" />
    </div>
</div>


.directive(
    ...
    scope: {contacts: '='},
    ...
        $scope.addRow = function (rowContainerID) {
             var contact = makeEmptyContact();
             $scope.contacts.push(contact);
        };
    ...