ng-show / ng-hide 从 $scope 中移除 ng-model

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>

我正在使用 ng-croppie 指令。当我隐藏包含 ng-croppie 的 div 时，我裁剪的 url 在 $scope.

中消失了

它来自：

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

然后，一旦 ng-show 被调用，到：

pictureUrl:"data:,"

如果我按预期取消隐藏 div、pictureUrl returns。

如何使此 pictureUrl 属性即使在隐藏时仍然存在？

我知道 ng-if 会从 dom 中删除元素，但这对于 ng-show 来说似乎出乎意料。

Answer 1

您的 ng-show 指令位于 ng-croppie 控件的 parent DIV 上。 ng-show 切换 HTML 控件的显示，这意味着当不满足 ng-show 条件表达式时，您的整个 div（及其内容）将被隐藏，包括 DIV children。您需要将 ng-croppie 移出此 DIV 或将 ng-show 指令放在其他不包含 ng-croppie 控件的地方。

ng-show / ng-hide 从 $scope 中移除 ng-model

ng-show / ng-hide removes ng-model from $scope

javascript

angularjs

ng-show

angular-ng-if

ng-hide