Schaltfläche anzeigen, wenn Felder von js zurückkehren

Question

Ich benutze eckig, um ein Formular anzuzeigen, die 2 Felder haben, die über DB-Abfrage (Benutzer und Raum) zugewiesen werden, und eine Senden-Schaltfläche (die keine DB-Operation zum Laden benötigt) .

was passiert, wenn ich diesen Code unten schreibe, ist, dass die Schaltfläche sofort angezeigt wird (da es nichts abhängt) und die Felder: RandomName und RandomRoom brauchen etwas Zeit zum Laden, da sie db benötigen Betrieb.

was ich will, ist das gesamte Formular (Schaltfläche und Felder zur gleichen Zeit) anzuzeigen.

Ich brauche etwas von when-Felder-sind-geladen-from-db ---> laden Sie sie mit der Taste ...

Dank

 <button type="button" ng-click="randomRoomButtonClass=true;getRandomRoom()">Random conversation!</button> 
       <br>   
        <br> 
        <li ng-if="randomRoomButtonClass" style="list-style: none;">{{randomName}}</li> 
        <li ng-if="randomRoomButtonClass" style="list-style: none;">{{randomRoom}}</li> 
        <button type="button" ng-if="randomRoomButtonClass" ng-click="enterRoom({name: randomName,room: randomRoom})">Enter! 
        </button> 

Answer 1

Wickeln Sie den HTML-Code in einem div ein mit ng-if-Anweisung. Das Timeout wird für den Proof of Concept verwendet. Dies wäre stattdessen in Ihrem Rückruf, abzüglich des $ -Zeitlimits.

https://jsfiddle.net/53j7749e/

Angular

function AppCtrl($scope, $timeout) { 
    $timeout(function() { 
    $scope.randomName = 'Yo'; 
    $scope.randomRoom = 'Hey'; 
    }, 2000); 
} 

HTML

<span ng-if="!randomName">Loading...</span> 
<div ng-if="randomName"> 
    <button type="button" ng-click="randomRoomButtonClass=true;getRandomRoom()">Random conversation!</button> 
    <br> 
    <br> 
    <li>{{randomName}}</li> 
    <li>{{randomRoom}}</li> 
    <button type="button" ng-click="enterRoom({name: randomName,room: randomRoom})">Enter! 
    </button> 
</div> 

Answer 2

Eine Arbeit um eine Verzögerung verwendet. Sie können versuchen, das ng-Ereignis auf mit:

<button type="button" ng-click="randomRoomButtonClass=true;getRandomRoom()" >Random conversation!</button> 
     <br>   
      <br> 
      <li ng-if="randomRoomButtonClass" ng-change="setDelay()" style="list-style: none;">{{randomName}}</li> 
      <li ng-if="randomRoomButtonClass" ng-change="setDelay()" style="list-style: none;">{{randomRoom}}</li> 
      <button type="button" ng-if="randomRoomButtonClass" ng-click="enterRoom({name: randomName,room: randomRoom})" ng-show="delay">Enter! 
      </button> 

Sie können eine Verzögerungsfunktion in Ihrem Controller hinzuzufügen.

$scope.setDelay = function(){ 
    $scope.delay = true; 
    $timeout(function(){ 
     $scope.delay = false; 
    }, 100); 
}; 

Lesen Sie weiter: Can ng-show directive be used with a delay