Question

我在以下内容中展示和形象：

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

我想删除if我的图片使用fallback-src。我的fallback-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返回一个图片网址字符串，以便浏览器找到图像或抛出404，这就是我有一个fallbackSRC指令的原因。现在的问题是，当我们使用fallback-src时，我想删除父<div>（当有图像时我需要它）。

如果img src正在使用fallback-src，我需要检测哪些ng-if表达式？

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等于fallbackSrc的值，则需要更改指令以隐藏图像。我无法想出ngIf找出src和fallbackSrc进行比较的方法。仅当ngIf变量没有值时，logo-wrap才会隐藏logo-src。

如果你想隐藏指令，如果有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 for hidden class ...

.hidden {
    display: none;
}

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

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

1 个答案: