I am upgrading from ng-grid to ui-grid for an angularjs itunes app and I'm having some difficulty getting album image and view icon to display inside my ui-grid, it seems to have trouble binding to the img tags. The View icon should be linked to a url (see below).
inside my $scope.gridOptions...
{field: 'View', displayName: 'View', width: 60, cellTemplate: '<div class="ui-grid-cell-contents ng-binding ng-scope" ng-class="col.colIndex()"><a ng-href="grid.getCellValue(row, col)"><img ng-src="https://images.onlinelabels.com/images/clip-art/emyller/emyller_magnifying_glass.png" height="30px" width="30px" lazy-src /></a></div>'},
{field: 'AlbumArt', displayName: 'Album Cover', width: 110, cellTemplate: '<div class="ui-grid-cell-contents ng-binding ng-scope" ng-class="col.colIndex()"><img ng-src="grid.getCellValue(row, col)" lazy-src /></div>'},
According to the UI-Grid Tutorial for custom templates:
You can use grid.appScope in your row template to access elements in your controller's scope
So your cellTemplate would need to call grid.appScope.getCellValue(...)
instead of grid.getCellValue(...)
. Your ng-src expression will also need {{ brackets }}
so Angular evaluates it.
Here's a quick and dirty example based on your columnDefs: http://plnkr.co/edit/jGGBx1PlOjUqAq282L7I?p=preview