javascript - Angularjs - 在完成之前删除元素闪烁的指令

Question

如果 ng-src 导致 404，我正在尝试编写一个 指令 来删除 img 元素.该指令有效，但损坏的 img 出现了一秒钟，然后被删除。我试图在元素呈现在 GUI 中之前将其删除。

TS:

import { IDirective } from "angular";

/* @ngInject */
export function imgSrcErr($http): ng.IDirective {
    return {
        link: (scope, element, attrs) => {
            element.bind("error", () => {
                element.parent().remove();
                console.log("error");
            });
        }
    };
}

HTML:

<img img-src-err ng-src="{{$ctrl.model.pictureUrl}}"/>

Answer 1

您可以采取一些解决方法，例如加载时将不透明度设置为 0:

link: (scope, element, attrs) => {
    element.addClass('opacity-0');
    element.bind('error', () => {
        element[0].remove(); // not sure why you remove parent of element, but up to you
    });
    element.bind('load', () => element.removeClass('opacity-1'));
}

opacity-0 {
  opacity: 0;
}