ng-show not working in datatables columns

问题

I am creating a table in angular using datatables. I've use a value from the scope and I compare this value with the data received.

"columns": [{ data: null, render: function ( data, type, row ) {
var roleid =angular.element('#TextkeysController').scope().currentRole;
return '<p ng-show="'+data.id+' == '+roleid+'" class="btn btn-success btn-xs disabled" value="connected" >connected</p><p ng-show="'+data.id+' != '+roleid+'" class="btn btn-danger btn-xs" value="notConnected" ng-click="connectRole(\''+data.id+'\',\''+data.name+'\')">Not connected</p>';
}, name: 'connect', "className":"center"}]

When I load the data both button appear in the row - column and the condition only apply when I click in a ng-click action.

Could someone help me to know why this happen?

回答1:

Obviously angular is not aware of the HTML injected by dataTables. In this cases I use to $compile the rendered content in a drawCallback :

withOption('drawCallback', function() {
   $scope.$apply($compile(angular.element('#tableId'))($scope))
}

where #tableId is the id of your table. But in general this is a little bit messed up, imho. When I need specific angular directives attached to dataTables rows or columns I render the angular way with datatable="ng". Slower but more clean and maintainable.

来源：https://stackoverflow.com/questions/38657552/ng-show-not-working-in-datatables-columns