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.

It looks like your datagrid-view and datagrid-group elements are not surrounding your table, is this true? If so, the selector you have for your $compile statement won't select the right elements. — wjohnsto, Nov 06 '14 at 03:42
Datagrid-view and datagrid-group do indeed wrap around the table. — trevpry, Nov 16 '14 at 14:31

score 3 · Answer 1 · answered Nov 16 '14 at 22:36

3

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() )

answered Nov 16 '14 at 22:36

Thomas Hudspith-Tatham

471
3
13

Thank you. I would love to be able to use ng-grid, but I need to be able to merge rows, and ng-grid doesn't have that capability yet. – trevpry Nov 18 '14 at 15:08
Can you please post more complete code -- it's very hard to see exactly what's going on with your situation. Perhaps make a jsfiddle. Also I'm sure it would be possible to extend one of the many existing datagrid implementations to are a rowspan to some columns. There are many, have a look here: http://ngmodules.org/tags/grid – Thomas Hudspith-Tatham Nov 19 '14 at 00:54
I ended up make this way more complicated than was necessary. The answer came down to binding the click to the element with the data grid's callback method. Thanks for the Angular insights, though. I know I'm barely scratching the surface with what there is to know. – trevpry Nov 20 '14 at 17:52

score 1 · Answer 2 · answered Nov 04 '14 at 18:05

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.

I have implemented your suggestion, but still am at a loss. I have provided more detail in my original post. Thank you. — trevpry, Nov 04 '14 at 18:59

score 0 · Accepted Answer · answered Nov 20 '14 at 17:50

I figured out the solution, and it turns out the issue wasn't angular at all. JQuery Easy-UI provides a callback method for when the data is loaded. I simply used jQuery to bind a click event to the element, within the callback. It works now. Here is the final solution:

onLoadSuccess: function(data){
                $('.datagrid-group-title').bind('click', function(){
                    alert($(this).text());
                });
               }

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

3 Answers3