Registering ng-click in Angular after external data is loaded into datagrid

Question

I've been working on building an app in Angular, and one of the key components is a datagrid. I am using the jquery-easyui datagrid which is being populated from a backend script. The issue I'm having is that once the datagrid is loaded, I need to be able to click on the grouping headers and get an alert. I am loading the datagrid in the link object of an Angular directive.

I have tried two approaches. One is adding the "ng-click" attribute after the data is loaded, and the other is using jquery's on('click') function. Neither of these ever trigger any events. The attribute gets added to the element, but nothing happens on click. I've used $compile($('.class'))($scope); after adding the attribute, but still nothing. I'm really trying to learn Angular, and any feedback is appreciated.

I implement the changes mentioned in @whjonsto 's reply, but the ng-click attribute is still not firing. Here's what the HTML that easyui-datagrid injects looks like:

<div class="datagrid-view"></div>  .....  
  <div class="datagrid-group"></div>  
    <table>  
      <tbody>  
        <tr>  
          <td>  
            <span class="datagrid-group-title"></span>

The "datagrid-group-title" is the class I'm targeting. I'm able to add the ng-click, but the function is never called. In angular, I've added this: `

$('.datagrid-group-title').attr('ng-click', 'click()');
$compile($('.datagrid-view .datagrid-group')[0])($scope);

Thanks again for your response.

Answer 1

Try to use an existing datagrid implementation for angular.

E.g. http://angular-ui.github.io/ng-grid/

Also jQuery.on('click', fn) should work just fine -- but remember to call $scope.$digest or $apply() for state updates. You could pass the callback into your directive using a scope binding of an attribute scope: { clickCallback: "&" } and $el.click(function(){ $scope.clickCallback()(); $scope.$apply() )

Answer 2

If you're using the $compile directive, keep in mind that it will only compile the childNodes of whatever element you pass in. So if your HTML looks like this:

<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'code'">Code</th>
            <th data-options="field:'name'">Name</th>
            <th data-options="field:'price'">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td><td>name1</td><td>2323</td>
        </tr>
        <tr>
            <td>002</td><td>name2</td><td>4612</td>
        </tr>
    </tbody>
</table>

You will want to do something like the following:

$compile($('.easyui-datagrid thead')[0])($scope);

That would grab the element, compile its childNodes, and link them to $scope.