ng-showとng-hideで同じ画像をアップロードすることができません

Question

画像をサーバにアップロードしたいのですが、画像が2つあります。左側に1つ、現在他の画像をアップロードしています。左側の「アップロード」ボタンをクリックするとサイドイメージが表示されます。アップロード後、「X」をクリックするとイメージの右側に「X」マークが表示されます。もう一度アップロードした画像と同じ画像をアップロードした場合はアップロードしていませんか？ 。他の画像をアップロードしている場合はアップロードしています。

<div ng-click="deleteLocalfile()" ng-hide="deletePreviewImage" ng-show="showImage" class="img-wrap"> 
    <span class="close">&times;</span> 
    <img ng-src="{{imagepreviewUrl}}" ng-if="imagepreviewUrl" style="width: 100px; height: 100px;" alt="" data-id="103"> 
</div> 
<a ng-show="user.photo.photoProof" href><img ng-src="{{tabindexUrl}}" style="width: 100px; height: 100px;" alt=""></a> 
<div class="fileUpload btn btn-primary" flow-attrs="{accept:'image/*'}"> 
    <span>Upload</span> 
    <input data-flow-btn type="file" ng-model="user.photo.photoProof" name="photoProof" id="photoProff" class="upload"/> 
</div>`<div class="list-group mt-md mb-0" data-ng-show="$flow.files.length" data-ng-repeat="file in $flow.files"> 
    <div class="box-layout list-group-item" data-ng-hide="fileUploadSuccess"> 
    <div class="col-xs-2 va-m"> 
     <span class="img-wrapper img-rounded" style="width:50px;"><img imageonload="onImgLoad('photo')" flow-file-added="validate($file)" flow-img="file" alt="" style="width: 50%; height: auto;"></span> 
    </div> 
    <div class="col-xs-5 va-m"> 
     <div class="progress progress-sm nm"> 
     <div class="progress-bar" ng-style="{width: (file.progress() * 100) + '%'}"></div> 
     </div> 
     <div class="col-xs-5 va-m"><strong>{{file.name}}</strong > {{file.size}} bytes</div> 
    </div> 
    </div> 
</div>` 

コントローラコード：

$scope.onImgLoad = function(type){ 
    $scope.deletePreviewImage = true; 
    $scope.previewImageUrl = ''; 
    switch (type){ 
    case 'photo': 
     MyService.getBase64Content($scope.flow.photoDoc.files[0].file, function(e){ 
     $scope.user.photo.photoProofContent = e.target.result.substr(e.target.result.indexOf(',') + 1); 
     $scope.imagepreviewUrl = 'data:image/jpeg;base64,'+ $scope.user.user.photoProofContent.replace(/['"]+/g, ''); 
     $scope.previewImageUrl = $scope.imagepreviewUrl; 
     $scope.deletePreviewImage = false; 
}); 

deleteLocalfile方法：

$scope.deleteLocalfile = function(){ 

$scope.showImage = false; 
     $scope.deletePreviewImage = true; 

}

画像のアップロードは、サイドイメージとして残して、それが表示されます "1.jpegを" と言った後、この画像の「X」をクリックすると、後で非表示になります。同じ画像をアップロードすると「1.jpeg」と表示されます。 $ scope.onImgLoad（）メソッドを呼び出すと、他のImageが "2.jpeg"という名前でアップロードされている場合、左側のイメージとして表示されます。なぜ "1.jpeg"が来ないのですか？前の画像を保持しているイメージタグのsrc属性です。その理由は変わりません。

Answer 1

、ブラウザは、変更イベントをトリガしません。同じファイルをアップロードする前に、あなたは空の文字列への入力の値を設定する必要があるので。たとえば、$（ '＃photoProff'）。val（ ''）;

コードを慎重に読んでいないので、codepenのURLアドレスまたはjsFiddleのURLアドレスを指定すると、私はもっと知ることができます。

Answer 2

ng-showまたはng-hideの代わりにng-ifを使用してください。

ng-ifは、条件がtureの場合にのみHTMLの要素を読み込みます。 ng-showまたはng-hideの場合は、画像の表示のみがブロックまたは非表示に設定されますが、画像は常にDOMにあります。

つのファイルをアップロードして、再度同じファイルをアップロードする例は

<img ng-src='someurl' ng-if="condition==true" />