3

如此处所述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-cloak/ng-show elements blink，但没有任何成功。

我不能使用 ng-if，因为我使用ui-router-extras中的“Sticky State” ，这需要 DOM 持续存在。

4

3 回答 3

0

您可以使用 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 会触发带有粘性状态的闪烁效果，但这种解决方法解决了这个问题。

于 2017-09-13T14:43:38.117 回答
0

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

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

风格配置。我在 CodePen.io 上做了一个例子，展示了这个解决方案与 Angular UI Router 一起工作的精确性。正如您在示例中看到的那样，整个视图会像您提到的那样闪烁，但是，如果您将“ng-cloak”指令添加到：

<div ng-app="myApp">

然后将变为：

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

你会看到Angular 保护视图不被显示（闪烁）。这正是“ng-cloak”指令的目的。

希望这个例子能帮助你解决你的问题。

于 2016-11-27T17:50:55.710 回答
0

$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);
}
于 2016-11-27T17:29:27.797 回答