ng-click of anchor tag is not binding when adding rows dynamically in the datatable

Question

I am using the the bootstrap datatable with my angularjs application and in this am creating the link in a column dynamically by using the following code but i am unable to fire its ng-click function.If i return the simple html in the formatter fields its not firing and when i use $compile to return then it shows the object in that column.Its showing correctly in the datatable the problem is only its ng-click is not firing .How can i do it?

$scope.matterTableControl = {
options: {
queryParams: queryParams,
toolbar: "#get",
url: intakeAppFactory.getUserMatters(),
sidePagination: 'server',
showColumns: true,
clickToSelect: false,
maintainSelected: true,
columns: [
{
field: 'Name',
title: 'Matter',
align: 'center',
valign: 'bottom',
sortable: false,
formatter: matterNameFormatter
}]
}
};

function matterNameFormatter(value, row, index) {
return '<a href="javascript:void(0)"  ng-click="showValue(\'' + row.MatterId + '\')">' + value + '</a>');
}

Why the anchor tag is not properly closed? <a href="javascript:void(0)" ng-click="showValue(\'' + row.MatterId + '\' — Siva
– Siva, Commented Feb 2, 2016 at 4:29
its properly closed its just typing mistake when i am posting it here.. its showing correctly in the datatable but its ng-click is not working :( — Manjit Singh
– Manjit Singh, Commented Feb 2, 2016 at 4:30

Minato · Accepted Answer · 2016-02-02 05:47:25Z

1

You need to $compile the html string and bind $scope to it.

function matterNameFormatter(value, row, index) {
    var newElement =  angular.element('<a href="javascript:void(0)"  ng-click="showValue(\'' + row.MatterId + '\')">' + value + '</a>'));
    $compile(newElement)($scope);
    return newElement;
}

You have to use $compile to compile the new element and bind the $scope to it.

P.S. I am assuming all of the code provided is inside the controller and both $compile and $scope will be accessible from matterNameFormatter

answered Feb 2, 2016 at 5:47

Minato

4,5631 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Manjit Singh Over a year ago

its returing [object][object]

Minato Over a year ago

@ManjitSingh what datatable plugin are you using?

Manjit Singh Over a year ago

I am using issues.wenzhixin.net.cn/bootstrap-table/#integrate/angular Documentation: bootstrap-table.wenzhixin.net.cn/documentation

Minato Over a year ago

@ManjitSingh Can you make a js-fiddle?

Manjit Singh Over a year ago

i have never made this but i will try..... Please help if you found anything its urgent :(

|

Collectives™ on Stack Overflow

ng-click of anchor tag is not binding when adding rows dynamically in the datatable

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related