DataTable + AngularJS - pass a data property on on-click attribute

Viewed 43

Not sure how to package this question very well but I have integrated AngularJS with DataTables. I'm wondering how would I be able to pass a data property on on-click attribute when I used it on the render() function of datatable

render: function(d, t, r, m) {
  let actions = '';
  data.actions.forEach(a => {
    actions += `<button ng-click="${a.click(r)}">${a.label}</button>`;
  });
  return actions;
}

(please refer to the code below)

These are the important parts of the code:

// DIRECTIVE
mod.directive('libTable', function() {
  return {
    controller: 'Controller',
    link: function(scope, element, attrs, Controller) {
      scope.$watch('data', function() {
        Controller.setup(scope.data);
      });
    }
  };
});

// CONTROLLER
mod.controller('Controller', function ($scope) {
  this.setup = (data) => {
    // some other codes here...
    $scope.dtColumns.push({
    data: 'Actions',
    title: 'Actions',
    render: function(d, t, r, m) {
      let actions = '';
      data.actions.forEach(a => {
        actions += `<button ng-click="${a.click(r)}">${a.label}</button>`;
      });
      return actions;
    }
  });
});

The function works however it's being executed immediately on page load and I don't want that to happen since I only want it to be triggered only on click of the button.

Thank you.

0 Answers
Related