从 Angular 页面中删除 img 元素

Question

我正在创建一个 angular 网络应用程序，我想首先在其中显示图像，但是当您单击按钮时，我想删除此默认图像并将其替换为视频流网络摄像头。但到目前为止，删除图像元素仍然很困难...

angular.module('qrWebapp').directive('qrScanner', ['$timeout', 'openScannerService', function($timeout, openScannerService) {
  return {
    restrict: 'E',
    scope: {
      ngSuccess: '&ngSuccess',
      ngError: '&ngError',
      ngVideoError: '&ngVideoError'
    },
    link: function(scope, element, attrs) {
      var isOpen;
      var onlyOpenOnce = 0;

      var image = document.createElement('img');
      image.setAttribute('id', 'defaultImage');
      image.setAttribute('src', 'assets/images/defaultimage.png');
      image.setAttribute('width', '400');
      image.setAttribute('height', '300');
      image.setAttribute('alt', 'defaultimage');

      scope.$on('handlePublish', function() {
        isOpen = openScannerService.sharedBoolean;

        if(isOpen){
        //some code
           //finding the image on the angular page    
           var findedElement = angular.element('#defaultImage');
           findedElement.remove();

           var context;

           if(onlyOpenOnce < 1){
             angular.element(element).append(video);
             angular.element(element).append(canvas);
             context = canvas.getContext('2d'); 
           }

           onlyOpenOnce++;
    } 
    else {

      angular.element(element).append(image);
    }
  });
}
  };

}]);

有谁知道我做错了什么吗？

Answer 1

你不应该试图删除 DOM 明智的。而是使用 ng-if 有条件地在您的页面上呈现元素。

例如，在您的 HTML

    <img id="imgID" src="assets/images/defaultimage.png" ng-if="renderImage" />
    <canvas ng-if="renderCanvas"></canvas>

然后在你的指令中：

    link: function(scope, element, attrs) {
        scope.renderImage = false; // Renders image by default
        scope.renderCanvas = true; // Renders Canvas by default

        scope.$on('handlePublish', function() {
            scope.renderImage = false; // The image element will be removed from the DOM
            scope.renderCanvas = true; // The canvas element will be rendered in the DOM
        }

Answer 2

我用过属性setAttribute(src, "")

removerImg(){
    console.log('Removiendo..');
    let im = document.getElementById('preview').setAttribute('src' , '../../../../../assets/img/no-image.jpg');      
}

从 Angular 页面中删除 img 元素

Remove img-element from Angular page

javascript

jquery

element

angularjs

angular-directive