html - 如果角度属性为空，则隐藏元素

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

或者，可以使用ngIf指令，如下所示：

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

Answer 3

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

所以我创建了一个指令：

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 为空或根本没有关联的图像，则不会显示。