ng-show/ng-hide entfernt ng-Modell von $ scope

Question

<div ng-show="!showTagging" class="form-group"> 
       <div class="form-group"> 
       <div ng-show="!showPreview"> Add a photo of you enjoying a specific whiskey or an image inspired by one!</div> 
       <hr></hr> 

    //when file is uploaded below, it sets $scope.post.picturePreCrop 

       <label id="upload" required ng-model="post.picturePreCrop" ngf-pattern="image/*" ngf-select="droppedFile()" accept="image/*" ngf-accept="'image/*'" ngf-pattern="'.jpeg,.jpg,.png,.bmp'" ngf-max-size="8MB" ngf-max-files="1" ngf-fix-orientation="true"> 
         <div class="add-link"><i class="fa fa-camera"></i><a class="underlined"> Add or Take a Photo:</a></label></div> 
       <div></div> 
       <ng-croppie ng-if="post.picturePreCrop" src="post.picturePreCrop | ngfDataUrl" ng-model='post.pictureUrl' update='onUpdate' boundry="{w: 200, h: 200}" viewport="{w: 200, h: 200}" mousezoom="true" zoom="true" type="square"> 
       </ng-croppie> 
       <img ng-if="!post.picturePreCrop" class="prof-photo" ng-src="{{post.picture || 'https://placehold.it/200x200'}}"> 
      </div> 

//once picture is cropped, it sets $scope.post.pictureUrl 

      <div class="btn btn-lg btn-block btn-success" ng-disabled="post.picturePreCrop === undefined" ng-click="showTagging = true"> Next </div> 

`

//when the next button above is hit, $scope.post.pictureUrl is removed, but post.picturePreCrop still persist. 
</div> 

---

Ich verwende die ng-Croppie Richtlinie. Wenn ich das div, das ng-croppie enthält, verberge, verschwindet meine abgeschnittene URL in $ scope.

es geht aus:

pictureUrl:"data:image/png;base64,iVBORw0KGgoAAAAN... 

Dann, wenn ng-Show aufgerufen wird, zu:

pictureUrl:"data:," 

Wenn ich un-Ausblenden der div, pictureUrl kehrt, wie es erwartet wird.

Wie kann ich diese pictureUrl-Eigenschaft auch dann beibehalten, wenn sie ausgeblendet ist?

Ich weiß ng-wenn Elemente aus dem Dom entfernt, aber dies scheint unerwartet mit einer ng-Show ..

Answer 1

Ihre ng-show Richtlinie über die Eltern platziert DIV Ihre ng-croppie Kontrolle. ng-show schalten Sie die Anzeige eines HTML-Steuerelements um, was bedeutet, dass Ihr gesamtes div (und sein Inhalt) ausgeblendet wird, wenn die Bedingung ng-show nicht erfüllt ist, einschließlich der untergeordneten Elemente DIV. Sie müssen Ihre ng-croppie aus dieser DIV verschieben oder Sie sind ng-show Direktive woanders, die die ng-croppie Kontrolle nicht enthält.