adding an ng-click event for angular datatable td

Question

Previously I added an ng-click event to call $event.stopPropagation:

<td ng-click="$event.stopPropagation();">
    <button type="button" class="btn btn-default margin-right-5" ui-sref="patient( { id : patient._id } )">
        <i class="fa fa-edit"></i>
    </button>
    <button type="button" class="btn btn-danger" ng-click="vm.deletePatient( patient._id )">
        <i class="fa fa-trash-o"></i>
    </button>
</td>

Now that I have refactored my code and used the DTColumnBuilder

DTColumnBuilder.newColumn( '_id' ).withTitle( 'Options' ).notSortable()
.renderWith( function ( data, type, full, meta ) {
    return '<button type="button" class="btn btn-default margin-right-5" ui-sref="patient( { id : \'' + data + '\' } )">' +
            '<i class="fa fa-edit"></i> ' +
        '</button>' +
        '<button type="button" class="btn btn-danger" ng-click="vm.deletePatient(\'' + data + '\')">' +
            '<i class="fa fa-trash-o"></i>' +
        '</button>'
} )

how do I add the $event.stopPropagation to the parent td?

Answer 1

I don't know if this is the best way to do it but I added a div and added $event.stopPropagation() there instead. If there is an ng-click method when adding a new column with DTColumnBuilder please do tell me so I could refactor my code. This is just a work around.

DTColumnBuilder.newColumn( '_id', 'foo' ).withTitle( 'Options' ).notSortable()
.renderWith( function ( data, type, full, meta ) {
    return '<div ng-click="$event.stopPropagation()">' +
        '<button type="button" class="btn btn-default margin-right-5" ui-sref="patient( { id : \'' + data + '\' } )">' +
            '<i class="fa fa-edit"></i> ' +
        '</button>' +
        '<button type="button" class="btn btn-danger" ng-click="vm.deletePatient(\'' + data + '\')">' +
            '<i class="fa fa-trash-o"></i>' +
        '</button>' +
    '</div>'
} )