<ion-checkbox> 使用它显示/隐藏 div 时会导致闪烁答案

【问题标题】：<ion-checkbox> causes flicker while using it to show/hide a div<ion-checkbox> 使用它显示/隐藏 div 时会导致闪烁
【发布时间】：2016-07-25 09:16:57
【问题描述】：

我有一个场景，我正在使用为其分配模型值，根据复选框是否被选中自动获取分配给它的真假值。

<ion-checkbox class="checkbox-balanced clear-border" ng-model="DeliveryObj.shippingChecked">Same as billing address</ion-checkbox>
<div class="list list-inset" ng-if="!DeliveryObj.shippingChecked"></div>

但是当我使用该值显示使用 ng-if 隐藏 div 时，它会导致闪烁，div 出现然后消失。有什么原因吗？

我不得不绕过使用 display 属性来实现我的最终功能。

视为：

 <ion-checkbox class="checkbox-balanced clear-border" ng-change="showShippingDetails(DeliveryObj.shippingChecked)" ng-model="DeliveryObj.shippingChecked"><label>Same as billing address </label></ion-checkbox>
 <div class="list list-inset" id="shippingDetails" hidden></div>

在控制器中为：

// Functionality            : Shows/hides the shipping address div
// Params                   : showDetails - true/false 
$scope.showShippingDetails  = function(showDetails){

   if(showDetails){
         // $("#shippingDetails").hide();
         document.getElementById("shippingDetails").style.display = "none";
   }
   else{
         // $("#shippingDetails").show();
         document.getElementById("shippingDetails").style.display = "block";
   }
}

【问题讨论】：

标签： checkbox ionic-framework show-hide angular-ngmodel

【解决方案1】：

我猜这两种解决方案的区别在于ng-if 正在改变 dom 树。所以，也许它看起来会有所不同，尤其是当你的列表很长的时候。

尝试使用ng-show 再做一次，ng-show 仅更改样式以提高可见性，但不删除或添加元素到 dom 树。

【讨论】：

虽然它在 chrome 上运行良好，但在 android 和 ios 中存在问题，ng-hide 工作，但仍然想知道为什么会导致闪烁，在尝试向 dom 添加元素时，为什么模型值会切换？有什么想法吗？
是否有可能在您的布尔变量首先变为真之前？我的意思是您的应用程序中某处的某种默认值。如果您真的担心这一点，也许您应该构建一个 codepen 以在干净的情况下重新创建它，以便人们可以帮助您调试它。
嗯，它在桌面浏览器中运行良好，没有任何问题，但在 android 和 iphone 浏览器中检测到，所以我认为 codepen/fiddle 无法重现它。 :(

【解决方案2】：

其中一种方法是使用ng-cloak，按照angular docs：

ngCloak 指令用于防止 AngularJS html 模板浏览器在其原始（未编译）中短暂显示应用程序加载时的表单。使用该指令来避免 html模板显示引起的不良闪烁效果。

【讨论】：