Registering ng-click in Angular after loading external data in datagrid
I am working on building an app in Angular and one of the key components is datagrid. I am using jquery-easyui datagrid which is populated from a backend script. The problem I am facing is that after loading the datagrid, I need to click on the grouping headers and get a warning. I am loading datagrid into Angular directive reference object.
I've tried two approaches. One of them adds the "ng-click" attribute after loading the data, and the other uses the jquery on ('click') function. None of them ever trigger any events. The attribute is added to the element, but nothing happens when clicked. I used $compile($('.class'))($scope);
after adding the attribute, but still nothing. I am really trying to learn Angular and any feedback is appreciated.
I am implementing the changes mentioned in @ whjonsto's answer, but the ng-click attribute still fails. Here's the HTML that easyui-datagrid adds looks like this:
<div class="datagrid-view"></div> .....
<div class="datagrid-group"></div>
<table>
<tbody>
<tr>
<td>
<span class="datagrid-group-title"></span>
"datagrid-group-title" is the class I am targeting. I can add ng-click, but the function is never called. In Angular I added the following: `
$('.datagrid-group-title').attr('ng-click', 'click()');
$compile($('.datagrid-view .datagrid-group')[0])($scope);
Thanks again for your answer.
source to share
I figured out the solution and it turns out that the problem was not angular at all. JQuery Easy-UI provides a callback method for loading data. I just used jQuery to bind a click event to an element in the callback. He is working now. Here is the final solution:
onLoadSuccess: function(data){
$('.datagrid-group-title').bind('click', function(){
alert($(this).text());
});
}
source to share
Try to use existing datagrid implementation for angular.
eg. http://angular-ui.github.io/ng-grid/
Also jQuery.on('click', fn)
should work fine - but don't forget to call $scope.$digest
or $apply()
for state updates. You can pass a callback to your directive using attribute scoped binding scope: { clickCallback: "&" }
and$el.click(function(){ $scope.clickCallback()(); $scope.$apply() )
source to share
If you are using a directive $compile
, be aware that it will only compile the childNodes of whatever element you pass into. 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 need to do something like the following:
$compile($('.easyui-datagrid thead')[0])($scope);
To grab an element, compile its childNodes and bind them to $ scope.
source to share