Question

我正在创建一个指令，用于动态添加和删除元素。但是在添加和删除元素时，我的ng-click会多次触发。请提出建议。

此处启用值表示选择1 =＆gt; textbox; 2 =＆gt; selectbutton; 3 =＆gt;单选按钮; 4 =＆GT;复选框; 5 =＆GT; +/-

HTML：

<body  ng-app = "mainApp" ng-controller = "loginController">
<div id="sampleeid">
    <incrementrowsdirective idvalue="sto"
        arrayvalues='[]'
        labelvalues='["Concepto","Monto","Add/Remove"]'
        enablevalues='[2,1,5]'></incrementrowsdirective>
    <button ng-click="SampleButton()">Sample
        Button</button>
</div>

CODE：

gasapp.directive("incrementrowsdirective", function ($compile) {
    var trheaderelements;
    var tablenm;
    var tablenm1;
    var trelements;
    var trfirstelement;
    var firstelement;

    return {
        restrict: 'AE',
        scope: {
            idvalue: '@'
        },
        template: function (elem, attr) {
            return '<div class="col-md-8 col-sm-11 col-xs-11"><table id="tableheaderid"></table> <table id="tableid' + attr.idvalue + '" class="table table-condensed table-striped table-bordered table-hover no-margin">' +
                '</table></div>'
        },

        link: function (scope, iElement, iAttrs) {
            scope.labelval = JSON.parse(iAttrs.labelvalues);
            scope.enableval = JSON.parse(iAttrs.enablevalues);
            scope.arrt = JSON.parse(iAttrs.arrayvalues);
            scope.c = 0;
            scope.count = 1;

            trheaderelements = '<thead><tr id="mytrheader' + scope.idvalue + '" >';
            angular.forEach(scope.labelval, function (value, key) {
                trheaderelements = trheaderelements + '<th style="width: 20%;">&nbsp;' + value + ' </th>';
            });

            trheaderelements = trheaderelements + "</tr></thead>";

            tablenm = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trheaderelements);
            $compile(tablenm)(scope);


            trfirstelement = "<tr id='mytrfirstelement'>";


            angular.forEach(scope.enableval, function (value, key) {
                if (value == 1) {
                    trfirstelement = trfirstelement + '<td><input type="text" name="text1name' + scope.idvalue + value + key + '"  ng-model="text1value' + scope.idvalue + value + key + '" id="text1valueeid' + scope.idvalue + value + key + '" > </td>';
                }
                if (value == 2) {
                    trfirstelement = trfirstelement + '<td><select  id="selectid1value' + scope.idvalue + value + key + '" name="selectname1val' + scope.idvalue + value + key + '"  ng-model="selectmodel1val' + scope.idvalue + value + key + '"  style="width:185px;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
                }
                if (value == 3) {
                    trfirstelement = trfirstelement + '<td><input type="radio"  id="radio1idvalue' + scope.idvalue + value + key + '" name="radio1nameval' + scope.idvalue + value + key + '"  ng-model="radio1modelval' + scope.idvalue + value + key + '" > </td>';
                }
                if (value == 4) {
                    trfirstelement = trfirstelement + '<td><input type="checkbox"  id="checkbox1idval' + scope.idvalue + value + key + '" name="checkbox1nameval' + scope.idvalue + value + key + '"  ng-model="checkbox1modelval' + scope.idvalue + value + key + '"> </td>';
                }

                if (value == 5) {
                    trfirstelement = trfirstelement + '<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="+" id="addbtn' + scope.idvalue + value + key + '"   ng-click="addRow1(' + scope.c + ')">' +
                        ' </td>';
                }

            });
            trfirstelement = trfirstelement + "</tr>";

            firstelement = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trfirstelement);
            $compile(firstelement)(scope);

            trfirstelement = '';

            scope.addRow1 = function (a) {
                scope.c++;
                scope.count++;

                trelements = '<tr id=mytr' + scope.idvalue + scope.c + '>';
                angular.forEach(scope.enableval, function (value, key) {
                    scope.keyvalue = key;

                    if (value == 1) {
                        trelements = trelements + '<td><input type="text" name="text1name' + scope.idvalue + scope.c + value + key + '"  ng-model="text1value' + scope.idvalue + scope.c + value + key + '" id="text1valueeid' + scope.idvalue + scope.c + value + key + '" > </td>';
                    }
                    if (value == 2) {
                        trelements = trelements + '<td><select   id="selectid' + scope.idvalue + scope.c + value + key + '" name="selectname' + scope.idvalue + scope.c + value + key + '"  ng-model="selectmodel' + scope.idvalue + scope.c + value + key + '" style="width:100%;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
                    }
                    if (value == 3) {
                        trelements = trelements + '<td><input type="radio" id="radioid' + scope.idvalue + scope.c + value + key + '" ></input> </td>';
                    }
                    if (value == 4) {
                        trelements = trelements + '<td><input type="checkbox" id="checkboxid' + scope.idvalue + scope.c + value + key + '" name="aaa" ></input> </td>';
                    }
                    if (value == 5) {
                        trelements = trelements + '<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="+" id="addbtn' + scope.idvalue + scope.c + value + key + '"   ng-click="addRow1(' + scope.c + ')">' + '&nbsp;&nbsp;&nbsp;<input type="button" value="-" ng-click="removerowbutton1(' + scope.c + ')" > </td>';
                    }
                });

                trelements = trelements + "</tr>";
                tablenm1 = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trelements);
                $compile(tablenm1)(scope);
                trelements = '';
            }

            scope.removerowbutton1 = function (index) {
                //scope.c--;
                alert("Removed")
                var myEl = angular.element(document.querySelector('#mytr' + scope.idvalue + index));
                myEl.remove();
            }
        }
    };
});

Answer 1

需要删除行

$ compile（firstelement）（范围）; $ compile（tablenm1）（范围）;

并替换该行 firstelement = angular.element（document.getElementById（'tableid'+ scope.idvalue））。append（$ compile（trfirstelement）（scope））;

在指令中，ng-click多次触发angularjs

1 个答案: