ui-grid cellTemplate图像不显示

时间:2018-01-05 21:28:28

标签: angularjs angular-ui-grid ui-grid

我正在从ng-grid升级到ui-grid以获得angularjs itunes应用程序,并且我很难将专辑图像和视图图标显示在我的ui-grid内部,它似乎无法绑定到img标签。视图图标应链接到网址(参见下文)。

在我的$ 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>'},

1 个答案:

答案 0 :(得分:2)

根据自定义模板的UI-Grid Tutorial

  

您可以在行模板中使用grid.appScope来访问控制器范围内的元素

因此,您的cellTemplate需要调用<div class="outer" id="contentLayer"> <div class="inner inner--3"> Peter Wyatt </div> </div> 而不是grid.appScope.getCellValue(...)。您的ng-src表达式还需要grid.getCellValue(...),因此Angular会对其进行评估。

以下是基于columnDefs的快速而肮脏的示例: http://plnkr.co/edit/jGGBx1PlOjUqAq282L7I?p=preview