在父元素上使用 ng-if，具体取决于 img 的 src

Question

我在 a 中显示和图像如下：

<div class="logo-wrap" ng-if="fallback=src">
 <img class="logo" ng-src="{{logo_src}}" fallback-src="/app/ci/images/1x1.png"  />
</div>

我想删除 如果我的图像正在使用回退 src。我的后备指令是：

 angular.module('myApp').directive('fallbackSrc', function () {
   var fallbackSrc = {
     link: function postLink(scope, iElement, iAttrs) {
       iElement.bind('error', function () {
         angular.element(this).attr("src", iAttrs.fallbackSrc);         
       });
     }
   }
   return fallbackSrc;
 });

{{logo_src}} 从 API 返回一串图像 URL，因此由浏览器来查找图像或抛出 404，这就是我有一个 fallbackSRC 指令的原因。现在的问题是，当我们使用回退 src 时，我想删除父<div>（当有图像时我需要）。

我需要什么ng-if表达式来检测 img src 是否正在使用回退 src？

Answer 1

假设您的指令在 logo_src 变量不可用时使用回退源，请使用

<div class="logo-wrap" ng-if="logo_src">
 <img class="logo" ng-src="{{logo_src}}" fallback-src="/app/ci/images/1x1.png"  />
</div>

此代码表示当logo_src可用时，将呈现div。

我认为如果 src 等于 fallbackSarc 的值，您将需要更改指令以隐藏图像。我想不出ngIf找出 src 和 fallbackSrc 进行比较的方法。上述ngIf仅在logo-src变量上没有值时才隐藏logo-wrap。

如果您想在出现 404 错误时隐藏指令，您的 html 代码将需要像这样更改......

<div class="logo-wrap">
 <img class="logo" ng-src="{{logo_src}}" fallback-src="/app/ci/images/1x1.png"  />
</div>

和你的指令...

angular.module('myApp').directive('fallbackSrc', function () {
  var fallbackSrc = {
    link: function postLink(scope, iElement, iAttrs) {
      // Remember to remove the class hidden if the image src changes.
      iElement.bind('error', function () {
        angular.element(this).attr("src", iAttrs.fallbackSrc).parent().toggleClass("hidden", true);         
      });
    }
  }
   return fallbackSrc;
});

隐藏类的 CSS ...

.hidden {
    display: none;
}

我承认，这个解决方案并没有以您想要的方式解决问题，即不会删除div，但我相信它达到了相同的结果。