IgniteUI™ controls on AngularJS with generated unique IDs

The control library from Infragistics, IgniteUI™, is tailored for general Javascript usage under JQuery. To use it within an AngularJS web app, they have made a directive wrapper called “Ignite UI directives for AngularJS” available on GitHub.

At the time of this writing I’m using IgniteUI version 15.1.20151.1005 and V1.0.0 of ignite-angularjs.js.

Directive without ID

The following code snippet uses the IgniteUI angular directives as indicated on its instructions. It declares the directive for an igGrid and configures it all using custom HTML elements. At the bottom of this article there is the full code for the final version.

<div ng-controller="ctrl1">
<ig-grid data-source="dataJS" auto-generate-columns="true" event-data-binding="gridCreated">
<features>
<feature name="Selection" mode="row"></feature>
</features>
</ig-grid>
</div>
<script>
angular.module('app', ['igniteui-directives']).controller('ctrl1', ['$scope', ctrl]);
function ctrl($scope)
{
$scope.dataJS = [
{"title":"This is the title 1", "subtitle":"This is the subtitle 1", "id":1},
{"title":"This is the title 2", "subtitle":"This is the subtitle 2", "id":2},
{"title":"This is the title 3", "subtitle":"This is the subtitle 3", "id":3}];

$scope.gridCreated =
function(evt, ui)
{
$scope.grid1 = ui.owner.element;
$scope.dataJS[0].title = "created!";
};

$scope.$watch('grid1',
function()
{
if ($scope.grid1)
$scope.grid1.igGridSelection('selectRow', 1);
});
}
</script>

One thing that is missing from the IgniteUI directives is to store the created object on some angular scope so it can be later accessed to issue commands or get information from it. 
[…]


Read the full article.