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

Posted 2023-03-06

【中文标题】带有 $state.includes 的 ng-show 有闪烁/闪烁 - 有角度； ui路由器

【英文标题】：ng-show with $state.includes has blink/flickering - angular; ui-router

【发布时间】：2017-04-11 10:07:27

【问题描述】：

如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 持久化。

【问题讨论】：

你试过用ng-animate 为ng-show 制作动画吗？前任。 .ng-hide-add animation:0.5s showdiv ease; .ng-hide-remove animation:0.5s hideDiv ease;

默认使用备用 css 类隐藏。 <div class="default-hide" ng-show="$state.includes('state1')"></div>。默认隐藏应该有一个display: none，避免!important。

隐藏添加延迟，但隐藏删除没有。当我将时间设置为 2 秒左右时，眨眼变成了长时间的眨眼。它显示了一个很好的解决方案，但是通过延迟隐藏删除而不是隐藏添加。只有我不能让它工作..

@MiguelLattuada 默认隐藏它根本不显示。我想尝试在 $state.includes() 上添加一个带有 ng-class 的类。看起来就像重建 ng-show..

你找到问题了吗？

【参考方案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);

【讨论】：

感谢您的快速响应。我使用你的第一个选项。在选项 2 中，问题仍然存在。

【参考方案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. 正如您在示例中看到的那样，整个视图会像您提到的那样闪烁，但是，如果您将“ng-cloak”指令添加到：

<div ng-app="myApp">

然后会变成：

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

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

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

【讨论】：

感谢 CodePen。可悲的是它不起作用。当我在 Pen 中删除 ng-cloak 时，我也没有看到任何闪烁..

【参考方案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 会触发带有粘性状态的闪烁效果，但这种解决方法可以解决问题。