2016-11-11 24 views
0
<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> 

私はNG-croppieディレクティブを使用しています。 ng-croppieを含むdivを隠すと、切り取ったURLが$ scopeで消えます。それから行く

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

はその後、一度NG-ショーがに、呼び出される:Iのdivを非非表示にした場合

pictureUrl:"data:," 

、pictureUrlは、それが期待されているように戻ります。

このpictureUrlプロパティを非表示にしても永続化させるにはどうすればよいですか?

は、私が知っているNG-場合

答えて

0

あなたng-showディレクティブは、あなたのng-croppieコントロールの親DIV上に置かれます。.. DOMから要素を削除しますが、これはNG-ショーで予期しないそうです。 ng-showは、DIVの子を含むng-show条件式が満たされないと、div全体(およびそのコンテンツ)が非表示になることを意味するHTMLコントロールの表示を切り替えます。 ng-croppieDIVに移動するか、またはng-croppieのコントロールを含まない別の場所にng-showというディレクティブを配置する必要があります。

+0

これを達成する最も良い方法は何ですか?ユーザーは、彼らが は私が$腕時計内pictureUrlをチェックして、変数に格納するために条件文を置くことができると仮定..提出前に再度、写真を編集する必要が決定したが、思わない限り、私は、クロッパー/ croppieを非表示にする必要があります私は与えられたモデルの入力値の変化がモデルにコミットされたときに 'NG-croppie'制御は' NG-change'ディレクティブを取ることができ、デフォルトでは 'NG-change'ディレクティブがトリガされ推測 – NoobSter

+0

..ビットハックあなたのケースでは、 'post.pictureUrl'。 onChangeイベントハンドラメソッドを提供するだけで、モデルの分離コピーを$ scopeのローカル変数に格納することができます。 'ng-show'があなたのモデルを変更したときに' ng-change'ディレクティブが呼び出されるかもしれないと思っていますので、モデルのStringの内容をイベントハンドラメソッドに検証するロジックを使用する必要があります。 –

+0

これはもっと角度のある方法かもしれません。私は、JSON.parse(JSON.stringify(pictureUrl))を使用して、単なる参照ではなく、変数内にコピーとしてクロピー写真のデータを格納しました。 – NoobSter