javascript - 如何删除 AngularJS 中的动态 ng-hide 类？

Question

我必须实现图片上传功能和问题

<div class="container responsiveImageSet">
  <div ng-show="imageLoader" style="text-align: center;">
    <img class="imageLoaderGif" src="images/googleLoader.gif">
  </div>
  <div class="container" >
      <span ng-repeat="imgURL in backgroundImageURL track by $index">
        <img class="uploadedImageSet" src="{{imgURL}}">
      </span>
  </div>
</div>

是我在上传图像之前显示了微调器并且我正在使用 ng-show 但是在元素部分动态添加了 class="ng-hide"我必须删除这个类因为类正在创建一个我的问题请告诉我如何解决这个问题？

$scope.backgroundImageURL = [];
$scope.imageLoader = false;
$scope.uploadBackgroundImage = function(event) {
  $scope.imageLoader = true;

  //Get the value from the input field and assign into the fireabse node
  var userProductImg = $("#imgId")[0].files[0];
  var PSR = firebase.storage().ref('user/image');

  //get the date as well as put the imageURL from node
  var rn = new Date().getTime().toString();
  var task = PSR.child(rn).put(userProductImg).then(function(snapshot) {
    $timeout(function(){
      $scope.backgroundImageURL.push(snapshot.downloadURL);
      $scope.imageLoader = false;
      localStorage.setItem('userImageURL', $scope.backgroundImageURL);
    }, 0);
  })
}

Answer 1

在这里，我肯定会选择 ng-if 而不是 ng-show。

ng-show :

The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

ng-if :

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

记住实际使用表达式:

<div ng-if="imageLoader == true" style="text-align: center;">
  <img class="imageLoaderGif" src="images/googleLoader.gif">
</div>

你摆脱了 .ng-hide 并拥有更准确的控制，除了在需要时插入和删除元素，而不仅仅是通过可笑的 显示或隐藏!重要 破解。