ng-ifは両方の要素を表示します

Question

ng-ifを使用して表示するかどうかを判断する2つのボタンがあります。短時間の間、両方の要素が同時に表示されるべきではないにもかかわらず、両方の要素が表示されます。孤立した例では、これは正常に動作しますが、私のプロジェクトでは待ち時間があります。このポストに非常によく似ています：Angular conditional display using ng-if/ng-show/ng-switch briefly shows both elementsしかし、私が試したものとは異なる答えはありませんでした。

<button class="btn btn-primary drop_shadow" ng-if="vm.ingestReady == true" 
       ng-click="vm.ingestReady = !vm.ingestReady" ng-cloak> Start Ingest 
</button> 
<button class="btn btn-danger drop_shadow" ng-if="vm.ingestReady == false" 
       ng-click="vm.ingestReady = !vm.ingestReady" ng-cloak>Cancel Ingest 
</button> 

とコントローラのコードは、ページのロードに

vm.ingestReady = true; 

です。したがって、ボタンをクリックするだけで表示が切り替わるはずですが、ホット秒の場合は両方が表示されます。あなたのスタイルにこれを追加する必要がありますので、CSSを使用して

Answer 1

ng-cloak作品：（btn-primary/btn-danger用とng-class）

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

---

サイドノートでは

、ng-bindが良いかもしれませんこの種の問題の解決策。あなたはJS変数にボタンの内容を結合するか、またはそのように機能することができます：ボタンの範囲で、その後、

<button class="btn drop_shadow" 
     ng-class="getButtonClass()" 
     ng-bind="getButtonText()" 
     ng-click="vm.ingestReady = !vm.ingestReady"></button> 

そして、あなたはちょうど2つの参照JS関数を追加する必要があると思います（クリーナーこのロジックをインラインを置くより） ：

$scope.getButtonClass = function() { 
    return vm.ingestReady ? 'btn-primary' : 'btn-danger'; 
}; 

$scope.getButtonText = function() { 
    return vm.ingestReady ? 'Start Ingest' : 'Cancel Ingest'; 
}; 

Answer 2

これはngAnimateによって発生します。使用していない場合は削除してください。 ngAnimateを削除しない場合は、アプリに次のCSSを追加します。

より詳細な回答については

.ng-leave { 
    display:none !important; 
} 

angular ng-if or ng-show responds slow (2second delay?)