$ state.includesのng-showには点滅/ちらつきがあります。 UI-ルータ

Question

How to ng-hide and ng-show views using angular ui routerはここで説明したように、私は次のようなマークアップがあります。今、私は両方のdivが表示されている2つの状態の間で切り替えるとき

.container { 
    display: flex; 
    flex-direction: column; 
} 

：

CSSのフレックスボックスを使用して

<div class='container'> 
    <div ng-show='$state.includes('state1')></div> 
    <div ng-show='$state.includes('state2')></div> 
</div> 

を目の瞬きのために醜い点滅効果をもたらす。

Angularjs - ng-cloak/ng-show elements blinkからng-cloakを試しましたが、成功しませんでした。

私はui-router-extrasから 'スティッキーステート'を使用しているため、ng-ifを使用することはできません。これには、DOMを維持する必要があります。

Answer 1

$stateでは）そう

1）あなたはCtrlキー

に

$scope.state = $state; 

をこのような何かを行うことができますHTMLで使用する使用することはできませんが、私はこの

2をお勧めしません。 HTML

<div class='container'> 
    <div ng-show="showThis('state1')"></div> 
    <div ng-show="showThis('state2')"></div> 
</div> 

コントローラ内

あなたはすでにあなたはNG-マントを試してみましたことを言及していても

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

Answer 2

、私はあなたの問題に対する正しい答えは確かでNG-マントであることを考える：

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

スタイル設定。あなたが「NG-マント」ディレクティブを追加した場合I have made an example on CodePen.io that show exaclty this solution working with Angular UI Router.あなたが述べたように、あなたが、例の全景が点滅を見ることができるようにしかし、：

その後になります

<div ng-app="myApp"> 

：

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

あなたはそれが表示されますAngular protects the view from being showed (blinking).それはまさに 'ng-cloak'指令の目的です。

この例は、あなたが問題を解決するのに役立ちます。

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がスティッキー状態でフリッカー効果を引き起こす理由はわかりませんが、この回避策で問題が解決されます。