添加按鈕

Question

angular.module('app',[]) 
 
    .controller("upload", ['$scope', '$http', 'uploadService', function($scope, $http, uploadService) { 
 
    $scope.$watch('file', function(newfile, oldfile) { 
 
     if(angular.equals(newfile, oldfile)){ 
 
     return; 
 
     } 
 
    }); 
 

 
    }]) 
 
    .service("uploadService", function($http, $q) { 
 

 
    return ({ 
 
     upload: upload 
 
    }); 
 

 
    function upload(file) { 
 
     var upl = $http({ 
 
     method: 'POST', 
 
     url: '', // /api/upload 
 
     headers: { 
 
      'Content-Type': '' 
 
     }, 
 
     data: { 
 
      upload: file 
 
     }, 
 
     transformRequest: function(data, headersGetter) { 
 
      var formData = new FormData(); 
 
      angular.forEach(data, function(value, key) { 
 
      formData.append(key, value); 
 
      }); 
 

 
      var headers = headersGetter(); 
 
      delete headers['Content-Type']; 
 

 
      return formData; 
 
     } 
 
     }); 
 
     return upl.then(handleSuccess, handleError); 
 

 
    } 
 
    }) 
 
    .directive("fileinput", [function() { 
 
    return { 
 
     scope: { 
 
     fileinput: "=", 
 
     filepreview: "=" 
 
     }, 
 
     link: function(scope, element, attributes) { 
 
     element.bind("change", function(changeEvent) { 
 
      scope.fileinput = changeEvent.target.files[0]; 
 
      var reader = new FileReader(); 
 
      reader.onload = function(loadEvent) { 
 
      scope.$apply(function() { 
 
       scope.filepreview = loadEvent.target.result; 
 
      }); 
 
      } 
 
      reader.readAsDataURL(scope.fileinput); 
 
     }); 
 
     } 
 
    } 
 
    }]);

img.art_img_prev_use 
 
{ 
 
    width:250px; 
 
\t height:250px; 
 
    position: absolute; 
 
    top:0px; 
 
    left:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="prev_img_bar_widt" ng-app="app" ng-controller="upload"> 
 
    <form> 
 
    <div class="prev_img_arti-te_xt"> 
 
     <input type="file" fileinput="file" filepreview="filepreview"/> 
 
     <img class="art_img_prev_use" ng-src="{{filepreview}}" ng-show="filepreview"/> 
 
    </div> 
 
    </form> 
 
</div>

嘿，我嘗試進行簡單的圖像預覽的角度和寄託都似乎工作不錯，但有一個問題我解決不了。 問題：在上傳圖像後如何添加兩個按鈕「刪除圖像」和「更改圖像」，但我希望在添加圖像之前該按鈕不可見？

Answer 1

您可以在file輸入更改後設置一個標誌，並使用此標誌顯示/不顯示使用ng-if的按鈕。

element.bind("change", function(changeEvent) { 
     scope.fileinput = changeEvent.target.files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(loadEvent) { 
     scope.$apply(function() { 
      scope.filepreview = loadEvent.target.result; 
     }); 
     } 
     reader.readAsDataURL(scope.fileinput); 
     scope.showButtons = true; 
    }); 

在HTML：

<div ng-if="showButtons"> 
    <button>Remove Image</button> 
    <button>Change Image</button> 
</div> 

Answer 2

您的服務應該只是返回upl它返回一個承諾。調用控制器的成功處理程序會設置一個$ scope變量來切換按鈕的可見性。

.controller("upload", ['$scope', '$http', 'uploadService', function($scope, $http, uploadService) { 
    $scope.$watch('file', function(newfile, oldfile) { 
    if(angular.equals(newfile, oldfile)){ 
     return; 
    } 
    }); 

    uploadService.upl(). 
    then(function(response) { 
    $scope.showButtons = true; 
    }, 
    function(err) {}) 

}]）

的$scope.showButtons就是顯示按鈕