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中的'Sticky State'，这需要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>

在控制器

中

$scope.showThis = function(type){
  return $state.includes(type);
}

Answer 2

即使你已经提到你已经尝试过ng-cloak，但我认为对你的问题的正确答案确实是ng-cloak：

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

样式配置。 I have made an example on CodePen.io that show exaclty this solution working with Angular UI Router.正如您在示例中看到的那样，整个视图会像您提到的那样闪烁，但是，如果您添加了＆＃39; ng-cloak＆＃39;指令：

<div ng-app="myApp">

然后将成为：

<div ng-app="myApp" ng-cloak>

你会看到Angular protects the view from being showed (blinking).而这正是＆＃39; ng-cloak＆＃39;的目的。指令。

希望这个例子可以帮助你解决问题。

Answer 3

您可以使用ng-style删除闪烁效果。

<div class='container'>
    <div ng-style="{'display': $state.includes('state1') ? 'block' : 'none'}"></div>
    <div ng-style="{'display': $state.includes('state2') ? 'block' : 'none'}"></div>
</div>

我不确定为什么ng-show会触发带有粘滞状态的闪烁效果，但这种解决方法可以解决问题。

带有$ state.includes的ng-show有闪烁/闪烁 - 有角度; UI路由器

3 个答案: