Question

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

<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";
   }
}

Answer 1

我猜两个解决方案之间的区别在于ng-if正在改变dom树。所以，也许它看起来会有所不同，特别是当你的清单很长时。

尝试再次使用ng-show，ng-show仅更改visiblity的样式，但不删除或添加dom树中的元素。

Answer 2

根据angular docs：

，其中一种方法是使用ng-cloak

ngCloak指令用于阻止AngularJS html模板来自浏览器的原始（未编译）短暂显示在您的应用程序加载时表单。使用此指令可以避免由html模板显示引起的不良闪烁效应。

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

2 个答案: