css - 带有 $state.includes 的 ng-show 有闪烁/闪烁 - Angular ；用户界面路由器

Question

如此处所述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 持久化。

Answer 1

$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);
}