1
私は、要素を動的に追加および削除するために使用されるディレクティブを作成しています。しかし、要素を追加したり削除したりしながら、ng-clickを複数回起動します。ご提案ください。ディレクティブで、ng-clickを複数回クリックします。angularjs
有効値は、1 =>テキストボックスを選択することを意味します。 2 => selectボタン; 3 =>ラジオボタン; 4 =>チェックボックス; 5 => +/-
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%;"> ' + 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> <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> <input type="button" value="+" id="addbtn' + scope.idvalue + scope.c + value + key + '" ng-click="addRow1(' + scope.c + ')">' + ' <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();
}
}
};
});
この問題は、$ compileのために発生していると思います。これに代わるものはありますか？ –