Question

我正在使用Angular UI Grid，我查了几个堆栈溢出和其他博客，但似乎仍然无法解决问题。我有一个指令，但仍然无处可去。

问题

如果它存在于单独的服务器上，我想在UI网格表上呈现图像，否则将其设置为默认图像。我已经构建了一个自定义指令，并在UI网格columnDefs上注入了该指令。如果出现错误，我的指令会显示默认图像。问题是它没有显示现有服务器上可用的图像。

我附上了我的Plunkr：http://plnkr.co/edit/ZDHI3cfUWaa7NllGXZeL。 Plunkr似乎没有工作，但我的实际代码是。我想分享所有相关代码，以便您在Plunkr上获得所有必要的代码。

PS。我需要在profile_image_url上添加前缀url（www.bucketfeet.com）来获取图片。但是，有些网址是云端URL（http://d153fwbf2sefnf.cloudfront.net），这是他们的CDN。如果它以http：//开头，我不需要添加http://www.bucketfeet.com。否则，我这样做。

指令

app.directive('imageRender', function () {
    var imageRenderTableView = {
        restrict: 'AE',
        template: '<img width=20px src="http://google.com/favicon.ico" ng-src="www.bucketfeet.com/{{data.profile_image_url}}">',
        link: function(scope, element, attrs) {
          var defaultSrc = attrs.src;
              element.bind('error', function() {
                if(defaultSrc) {
                    element.attr('src', defaultSrc);
                }
                else if(attrs.ngSrc) {
                    element.attr('ngSrc', attrs.ngSrc);
                }
          });
        }
    }
    return imageRenderTableView;
});

在columnDefs中插入指令

{name:'img', width: 50, cellTemplate:"<image-render></image-render>", enableSorting: false}

HTML

<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>

我的屏幕 请参阅Plunkr获取JSON以及我如何检索Angular Service上的数据。

Answer 1

我刚刚解决了这个问题。我试图解决的问题是在Angular Ui-Grid表中呈现图像（如果它们存在于外部服务器上）。否则，显示默认图像。

您必须使用 row.entity.FIELDNAME 。在我的例子中，它是row.entity.profile_image_url，因为那是我的对象属性。

<强>指令

app.directive('imageRender', function () {
    var imageRenderTableView = {
        restrict: 'AE',
        template: '<img width=20px src="imgs/art.jpg" ng-src="{{row.entity.profile_image_url}}">',
        link: function(scope, element, attrs) {
          var defaultSrc = attrs.src;
              element.bind('error', function() {
                if(defaultSrc) {
                    element.attr('src', defaultSrc);
                }
                else if(attrs.ngSrc) {
                    element.attr('ngSrc', attrs.ngSrc);
                }
          });
        }
    }
    return imageRenderTableView;
});

您在Angular UI表中的列defs中将指令作为HTML属性传递。见下文：

columnDefs: [
            {name:'img', width: 50, cellTemplate:"<image-render></image-render>", enableSorting: false},
]

<强> HTML

<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>

PS-第二部分 我通过使用普通的javascript concat方法在我的profile_image_url中添加了前缀，方法是通过我的对象数组运行forEach方法。

希望如果有人在Angular UI Grid上动态渲染图像，这会有所帮助。 Angular指令是一种方法!!!!

Angular UI Grid：渲染图像（如果它存在于单独的服务器上，否则设置默认图像

1 个答案: