如此处所述How to ng-hide and ng-show views using angular ui router ,我有以下标记:
<div class='container'>
<div ng-show='$state.includes('state1')></div>
<div ng-show='$state.includes('state2')></div>
</div>
在CSS中使用flex-box:
.container {
display: flex;
flex-direction: column;
}
现在,当我在两种状态之间切换时,两个 div 都会眨眼显示,从而导致丑陋的眨眼效果。
我尝试了 Angularjs - ng-cloak/ng-show elements blink 中的 ng-cloak ,但没有任何成功。
我无法使用 ng-if,因为我使用 ui-router-extras 中的“粘性状态” ,这需要 DOM 持久化。
最佳答案
$state
无法在 HTML 中使用,因此
1) 你可以在 Ctrl 中执行类似的操作
$scope.state = $state;
但我不会推荐这个
2) 在 HTML 中
<div class='container'>
<div ng-show="showThis('state1')"></div>
<div ng-show="showThis('state2')"></div>
</div>
在 Controller 中
$scope.showThis = function(type){
return $state.includes(type);
}
关于css - 带有 $state.includes 的 ng-show 有闪烁/闪烁 - Angular ;用户界面路由器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40831537/