从 Angular 页面中删除 img 元素答案

【问题标题】：Remove img-element from Angular page从 Angular 页面中删除 img 元素
【发布时间】：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);
    }
  });
}
  };

}]);

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

【问题讨论】：

标签： javascript jquery angularjs element angular-directive

【解决方案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');      
}

【讨论】：