Question

我想在div中添加另一行＆＃34;＃rowContainerXXX＆＃34;点击＆＃34;添加其他行＆＃34;按钮。我想我必须使用＆＃34; $ compile＆＃34;编译新的html指令。我尝试了从堆栈溢出到实现此目的的几个链接但是无法成功。我试过两种不同的方法。一个使用链接功能概念，另一个使用编译功能。请指导我完成一些概念以实现我的目标。我实现添加新行的方式工作正常，没有链接和编译功能。但问题是＆＃34; ng-click = removeRow（）＆＃34;不适用于新添加的行。＆＃34; removeRow＆＃34;仅适用于指令的第一行。任何帮助表示赞赏。

这是指令的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

只需将联系人存储在数组中并重复它们即可。所以当你想添加行时 - 你只需要将.push（行）添加到数组中。它会出现。

<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);
        };
    ...

在AngularJS中对同一指令的按钮的ng单击添加HTML到指令

1 个答案: