iggrid on AngularJS view: How to call a controller function from a column template with button / onclick
I am developing an AngularJS app using iggrid with declarative options. The grid is bound to a datasource and is showing the data. So far it's working fine.
Now I added a column using a column template inluding a button group for executing several actions on each row. Here is the column definition:
<column key="actions" header-text="Aktionen" data-type="string" template="{{getHtml('#colTemplate')}}"></column>
An this is the column template (for simplicity I show just one button):
<script id="colTemplate" type="text/template" ng-non-bindable> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default"><i class="fa fa-edit fa-fw" onclick="viewDetails(${id})"></i></button> </div> </script>
As you can see, I try to call the function viewDetails() of the views controller. This function looks like this:
function viewDetails(id) { common.$location.path('/portale/detail/' + id); }
Other functions resp. action handlers like this need to work and manipulate the grids datasource.
Clicking on the button is throwing the following error on the javascript console:
Uncaught ReferenceError: viewDetails is not defined
How can I call the controller function?
Any help would be appreciated.
Hello Peter,
You're welcome.
Don't hesitate to ask if you have further questions regarding this matter.
Best regards,Martin PavlovInfragistics, Inc.
Hello Martin,
This is working perfectly.
Thank you, Martin.
Regards Peter
The igGrid Angular directive doesn't compile the DOM generated by the igGrid itself. This is the reason that viewDetails function is not lookup in the $scope.
The easiest way to call viewDetails on the $scope is to get the reference to the $scope using the angular.element API:
<i class="fa fa-edit fa-fw" onclick="angular.element('#grid1').scope().viewDetails(${id})"></i>
Hope this helps,Martin PavlovInfragistics, Inc.