angularjsangular-ui-gridui-grid

Why aren't my ui-grid cellTemplate images not displaying?


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>'},

Solution

  • 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