Angular `ng-click` not working in DataTables table row

Question

I have an angular application that is also using jquery.dataTables. When I use datatables to build a dynamic table with th

Answer 1

$compile takes in a snippet of HTML and returns what's known as a linking function. This function takes a $scope that will it will use to do all the databinding.

This might have been confusing since you are using the controller as syntax (which is a good thing), so you don't deal directly $scope.

The two things you need to do here are to inject both $compile and $scope into your controller, and then use them.

//Using array injector notation here
app.controller('myCtrl', 
['$scope','$compile',
  function($scope, $compile) {
     //snip...
  }
]);

And then later when you are linking your row, you can call it with the injected $scope like this:

$compile(angular.element(row).contents())($scope);

If you run the snippet below, you can see it all works as expected.

var app = angular.module('appy', []);
app.controller('myCtrl', ['$scope','$compile',
  function($scope, $compile) {
    var _this = this;

    $('#report').DataTable({
      data: [{
        "LastName": "Doe",
        "Link": "Test Alert"
      }],
      columns: [{
        "title": "Last Name",
        "data": "LastName"
      }, {
        "title": "Actions",
        "data": "Link"
      }],
      createdRow: function(row, data, dataIndex) {
        $compile(angular.element(row).contents())($scope);
      }
    });

    this.buttonAlert = function() {
      $('#buttondiv').addClass('success');
    };

    this.htmlAlert = function() {
      $('#htmltablediv').addClass('success');
    };

    this.dataTablesAlert = function() {
      $('#datatablediv').addClass('success');
    };

  }
]);

div {
    margin-top: 15px;
    padding: 5px;
  }
  div.borderdiv {
    border: 1px solid black;
  }
  td {
    border: 1px solid black;
    padding: 2px
  }
  .success {
    background-color: green;
  }

  

    
Button with ng-click
    Test Alert
  

  

    
HTML Table with ng-click
    

      

        
Last Name
        
Actions
      
      

        
Doe
        

          
            Test Alert
          
        
      
    
  

  

    
DataTables with ng-click