CODEWITHSUNDEEP
angularjs
Manjit Singh
Manjit Singh

Reputation: 255

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

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

Upvotes: 1

Views: 607

Answers (1)

Minato
Minato

Reputation: 4533

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

Upvotes: 1

Related Questions