从 Angular 页面中删除 img 元素

Posted 2023-02-22

【中文标题】从 Angular 页面中删除 img 元素

【英文标题】：Remove img-element from Angular page

【发布时间】：2015-07-08 03:21:52

【问题描述】：

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

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);
    
  );

  ;

]);

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

【参考方案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
         

【讨论】：

它有效，但我只对图像使用了 ng-if，而不是画布。我还使用了一项服务来调整此值。感谢您的回答！

很高兴它有帮助。如果它最适合您的用例，请选择它作为答案。

【参考方案2】：

我使用了属性setAttribute(src, "")

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