Question

我有一个图像元素，它从我的角度对象上的属性获取其路径。但是，如果此（imagePath）为空，则会出现图像损坏。如果属性为空，我想不渲染图像但是我没有看到这样做的方法。有什么想法吗？

<img width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

Answer 1

您想查看ngHide指令。

所以你的代码看起来像。

<img width="50px" ng-hide="current.manufacturerImage.imagePath == ''" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

或者，您也可以尝试 darkporter

的建议

<img width="50px" ng-show="current.manufacturerImage.imagePath" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

你也可以更新它以检查对象是否为null或未定义，然后隐藏元素。

Answer 2

这个建议对我不起作用，因为我根据用户角色生成了我的图像链接。用户有一个角色，但这并不意味着他们有一个与之相关的图像。

所以我创建了一个指令：

angular.module('hideEmptyImages', [])
.directive('hideEmptyImage',function() {
    return {
        Restrict: 'AE',
        Link: function (scope, elem, attrs) {
            elem.error(function() {
                elem.hide();
            });
        }
    };
});

所以：

<img hide-empty-image width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

如果.imagePath为空或者根本没有关联的图像，

将不会显示。

如果angular属性为空，则隐藏元素

2 个答案: