Using a directive that references the row data with a watcher

[jrdn91]

Before you write your question, please take some extra time to write a good title that is short yet descriptive.

What versions you are using?

• jquery version: 2.1.3
• datatables version: 1.10.12 - bootstrap version
• angular-datatables version: 0.5.4

What's the problem?

I am using the ajax implementation of datatables here to load data, there is a column for actions that has buttons that will call scope functions with ng-click, these buttons also use angular-ladda to have a nice loading UI, this library has you point to a property to watch for it to change either to true or a number to show a progress indicator, something like

<button ladda="loginLoading" ng-click="login()"> Login</button>

I need to have each of these buttons in the row listen to a property on the item in the array for when it's working on something with that record, but I'm having trouble figuring out how to get it to reference the particular rows property

Can you share your code?

So far in my dtColumns builder I have an item for this column that builds the buttons like so

DTColumnBuilder.newColumn(null).withOption('width','260px').withOption('render',function(data,type,row){
   var html = '<div style="min-width: 230px">';
   if(row.donation_paid){
     html += "<button type=\"button\" class=\"btn btn-warning\" ladda=\""+row.refunding+"\" data-style=\"zoom-out\" data-spinner-size=\"20\" ng-click=\"refundDonation($event,"+row.donation_id+")\">Refund</button>";
   }else{
     html += "<button type=\"button\" class=\"btn btn-primary margin-right-tiny\" ng-click=\"chargeDonation($event,"+row.donation_id+",'card')\">Charge Card</button>";
     html += "<button type=\"button\" class=\"btn btn-primary\" ng-click=\"chargeDonation($event,"+row.donation_id+",'cash')\">Accept Cash</button>";
   }
   html += "</div>";
   return html;
}),

I also have a createdRow callback that compiles these rows

function rowCallback(row,data,index){
  var rowHtml = angular.element(row);
  var rowTds = rowHtml.find('td');
  rowTds.each(function(){
    var thisHtml = angular.element(this).html();
    $scope.rowIndex = index;
    var compiledHtml = $compile(thisHtml)($scope);
    angular.element(this).html(compiledHtml);
    angular.element(this).find('.hide').removeClass('hide');
  });
}

In this column the refund button has the ladda directive on it, but the way I'm doing it now is putting the actual property value in the directive rather than the reference to the property.

"<button type=\"button\" class=\"btn btn-warning\" ladda=\""+row.refunding+"\" data-style=\"zoom-out\" data-spinner-size=\"20\" ng-click=\"refundDonation($event,"+row.donation_id+")\">Refund</button>"

I realize this is really specific, and it's not a huge breaking thing but it would be nice to get this to work, but also to understand in the future how I would need to have a reference to a property work properly in datatables like this.

[l-lin]

Unfortunately, you can't put the reference in the renderWith method.
See #299.