Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Christian
486
How can I access a function in the angular controller from a column template
posted

Hi,

I'm starting to write a project using Angular and Ignite UI controls, especially the igGrid. So I got the angular directives and created a grid and set a data source which is working fine. Now I'm getting stuck on how I could trigger a function in my Angular controller from a template column. There is a sample on your page showing how to call a function by using the onclick event but this of course won't be executed within the controller so I would like to use something like the ng-click binding. As a sample what I already have here is the column definition:

<column key="Delete" header-text="Delete" data-type="string" unbound=true width="90px" template="{{getHtml('#deleteTemplate')}}"></column>

And this is the template I defined that is currently calling a javascript function getting passed the data

<script id="deleteTemplate" type="text/x-jquery-tmpl"><input type='button' onclick='alert("{{>#data}}")' value='Delete row' /></script>

As you can see I am using the jsrender engine for templates. Is there a way to use ng-click on this button and make it call a function on the angular controller of the context?

As a side question - I switched to jsrender because I could not find a solution to use an {{if}} within an {{each}} - is this possible with the Infragistics rendering engine?

The delete is just a sample – I know I could do this by using the Updating events but I have some other scenarios where I will need to call a function on the Controller and pass it the data of the row the button is shown in.

Any help would be appreciated.

Parents
No Data
Reply
  • 2671
    Suggested Answer
    Offline posted

    Hi,

    This is something I've been wanting to try for a while as well and my basic solution was to bring in the '$compile' service into my controller and handle the dataRendered event on the grid to process angular directives in the markup:

    app.controller('gridController', ['$scope', '$compile', 'northwind', function ($scope, $compile, northwind) { //...  $scope.compileRows = function(evt, ui) { $compile(ui.owner.element)($scope); }; //...  }]);

    And you use the templating engine to give you the key to use with the ngClick call:

     <script id="deleteTemplate" type="text/x-jquery-tmpl"> <input type='button' ng-click='deleteProductByKey({{>ProductID}})' value='Delete' /> </script> <ig-grid id="grid1" data-source="northwind" templating-engine="jsrender" event-data-rendered="compileRows" ...

    Branch: https://github.com/damyanpetev/igniteui-angular/tree/angular-compiled-jsrender/samples

    Sample: http://damyanpetev.github.io/igniteui-angular/samples/igGrid-compiled-jsrender.html

    Reasoning: I've already described in one of the issues that $compile is not suitable for templating (as the grid is designed to build the DOM as sting for performance) and live linked nodes won't play well here. The $interpolate however is essentially equivalent to a templating function and can be used (check out the sample). Anything that requires live binding needs to happen after the templating and DOM creation are done, which is what I did.

    You will still need to be careful for conflicts between templating and angular syntax. And because the grid (and directives in theory) needs to be in control of/rely on its own markup to perform features, I suggest you thread carefully with compiling directives in the rows. At least for this simple sample there doesn't seem to be any impact that I saw.

    In any case, we'd love to hear your feedback so you can always submit a Product Idea or visit the official repo in GitHub.

    Thanks,

    Damyan

Children