ng-if zeigt beide Elemente

Question

Ich habe zwei Schaltflächen, die ng-if verwenden, um festzustellen, ob sie angezeigt werden sollen oder nicht. Für eine kurze Sekunde werden beide Elemente angezeigt, obwohl sie nie zusammen angezeigt werden sollten. In isolierten Beispielen funktioniert das gut, aber in meinem Projekt hat es eine gewisse Latenz. Sehr ähnlich zu diesem Beitrag: Angular conditional display using ng-if/ng-show/ng-switch briefly shows both elements, aber das hatte keine Antworten, die anders waren als das, was ich versuchte.

<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> 

und Controller-Code ist

vm.ingestReady = true; 

auf Seite laden. Wenn Sie also auf die Schaltfläche klicken, sollten Sie nur die Ansicht wechseln, aber für eine heiße Sekunde sind beide sichtbar.

Answer 1

ng-cloak Arbeiten mit CSS, so dass Sie diese auf Ihre Stile hinzuzufügen benötigen:

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

---

Auf einer Seite zur Kenntnis, ng-bind (und ng-class für die btn-primary/btn-danger) kann eine bessere sein Lösung für diese Art von Problem. Sie können auf die Schaltfläche des Inhalts an eine JS-Variable binden oder funktionieren wie folgt:

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

Und dann, in den Anwendungsbereich der Taste, dann würden Sie müssen nur die beiden erwähnten JS-Funktionen (sauberer als setzen diese Logik inline) hinzufügen :

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

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

Answer 2

Dies wird durch ngAnimate verursacht. Versuchen Sie, es zu entfernen, wenn Sie es nicht verwenden. Wenn Sie ngAnimate nicht entfernen möchten, fügen Sie Ihrer App die folgenden CSS hinzu.

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

Für ausführlichere Antwort angular ng-if or ng-show responds slow (2second delay?)