below vm.onQRnClicked function is not getting fired from a ng-click in table. link for QRN column in table is being dynamically created from responses of API's. used ng-click to attach event.getWf, gLEP and getByLE are methods which will call respective API's internally and return their respective responses.
vm.onQRnClicked= function(){
return true;
}
getWf()
.then(function(response) {
gLEP(response.payload.lEId)
.then(function (lEPresponse) {
if (typeof lEPresponse.children !== "undefined") {
Promise.all(lEPresponse.children.map(function(e) {
return getpByLE(e.lEId)
.then(function(getpByLEresponse) {
var oLE = {};
var linkForQrN = '<a ng-click="vm.onQRnClicked()">' + e.qrN + '</a>';
oLE.html = e.html;
oLE.qrN = linkForQrN;
oLE.lEN = e.lEName;
oLE.code = getpByLEresponse.code;
vm.oLEs.push(oLE);
return html;
})
}))
.then(function(result) {
})
.finally(function() {
});
}
else
{
vm.dL = false;
}
})
.finally(function () {
});
})
.finally(function(){
});
html below. I try to give columns under QRN. function onQRnClicked is not getting fired.
<div class="row" >
<div class="col-xs-12 form-group">
<label class="control-label" >O D</label>
<br>
<table id="oT">
<tr>
<th>QRN</th>
<th>L E N</th>
<th>P Code</th>
<th></th>
</tr>
<tr ng-repeat="x in vm.oLEs">
<td id="qrN" ng-bind-html="x.qrN"></td>
<td ng-bind-html="x.lEN"></td>
<td ng-bind-html="x.code"></td>
<td ng-bind-html="x.html"></td>
</tr>
</table>
</div>
</div>
To add ng-click the way you are trying means you have to bind the element to $scope using compile, and isn't very angular-ish. In your use-case, it's better to just apply the ng-click to the html so that angular will compile automatically at runtime
<td ng-click="vm.onQRnClicked()" id="qrN" ng-bind-html="x.qrN"></td>