ng-show / ng-hide удаляет ng-модель из $scope

  <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. Когда я скрываю div, содержащий ng-croppie, мой обрезанный URL-адрес исчезает в $scope.

оно идет от:

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

Затем, после вызова ng-show, чтобы:

pictureUrl:"data:,"

Если я открою div, pictureUrl вернется к ожидаемому.

Как сделать так, чтобы это свойство pictureUrl сохранялось, даже если оно скрыто?

Я знаю, что ng-if удаляет элементы из dom, но это кажется неожиданным для ng-show.


javascript angularjs angular-ng-if ng-show ng-hide
person NoobSter    schedule 11.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваша директива ng-show помещается в родительский элемент DIV вашего элемента управления ng-croppie. ng-show переключает отображение элемента управления HTML, что означает, что весь ваш div (и его содержимое) будет скрыт, когда выражение условия ng-show не будет выполнено, включая дочерние элементы DIV. Вам нужно переместить ng-croppie из этого DIV или поместить директиву ng-show в другое место, не включающее элемент управления ng-croppie.

person Daniel G.    schedule 11.11.2016
comment
Каков наилучший способ добиться этого? Мне нужно, чтобы обрезка / обрезка была скрыта, если пользователь не решит, что им нужно снова отредактировать фотографию перед отправкой. Я полагаю, что мог бы разместить условные выражения, чтобы проверить pictureUrl в $watch и сохранить его в переменной, но кажется немного хакерским .. - person NoobSter; 12.11.2016
comment
Я предполагаю, что элемент управления ng-croppie может принимать директиву ng-change, по умолчанию директива ng-change срабатывает, когда изменение входного значения данной модели фиксируется в модели, в вашем случае в «post.pictureUrl». Вы можете просто предоставить метод обработчика события onChange для сохранения отдельной копии вашей модели в локальной переменной в вашей $scope. Я предполагаю, что директива ng-change может также вызываться, когда ng-show изменяет вашу модель, поэтому вам нужно будет использовать некоторую логику для проверки содержимого вашей модели String в вашем методе обработчика событий. - person Daniel G.; 14.11.2016
comment
Это может быть более угловатый способ попробовать. В итоге я сохранил данные фотографии обрезки в виде копии внутри переменной, а не просто ссылки — с помощью JSON.parse(JSON.stringify(pictureUrl)); - person NoobSter; 14.11.2016