Ng-show / ng-hide从$scope中删除ng-model
ng-show / ng-hide removes ng-model from $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指令。当我隐藏包含ng-croppie的div时,我的裁剪url将在$scope中消失。
从
pictureUrl:"data:image/png;base64,iVBORw0KGgoAAAAN...
一旦ng-show被调用,to:
pictureUrl:"data:,"
如果取消隐藏div, pictureUrl将返回到预期的位置。
我如何使这个pictureUrl属性持续存在,即使它是隐藏的?
我知道ng-if会从dom中删除元素,但这似乎出乎ng-show的意料。
您的ng-show
指令放置在您的ng-croppie
控件的父DIV
上。ng-show
切换HTML控件的显示,这意味着当ng-show
条件表达式不满足时,您的整个div(和它的内容)将被隐藏,包括DIV
子。你需要把你的ng-croppie
移出这个DIV
或地方你的ng-show
指令在其他地方不包括ng-croppie
控件。
相关文章:
- 从 Javascript 中设置 ng-model name
- Toggle Switch在包含ng model和ng repeat之后不进行切换
- 在Angularjs中,我如何使用ng repeat、ng model和ng click来动态更改内容
- 删除ng模型中的ng模型输入值
- 当与之关联的 ng-model 为 false 时,Angularjs 复选框值不会取消选中
- ng-model 绑定到选择标签生成的空默认值
- 对象不能在angularjs ng-model中访问
- 为什么 HTML 中的 Value 属性在与 AngularJS 中的 ng-model 一起使用时不起作用
- ng-repeat不绑定ng-model对象数组
- AngularJS:ng-model 绑定在使用 jQuery 更改时不会更新
- 选择/选项 ng-model 未绑定 ng-selected
- Angular ng-model 将数据作为数组发送到 rails-api
- 为什么 AngularJS 在使用 ng-model 时不会在文本框上设置长度属性
- AngularJS:Ng:init-如何分配Ng:model
- 在指令中使用 ng-model 和 ng-repeat
- 使用 angularjs 访问控制器中的 ng-model 数据
- 如果值为空,ng-model 将从对象中删除元素
- Ng-show / ng-hide从$scope中删除ng-model
- AngularJS & lt; select>使用ng-model和ng-options在元素删除时被破坏
- 当$validators返回false时,用ng-model-options删除作用域变量