AngularJS: Warten Sie, dass der Kontext vor dem Schreiben geladen wird HTML

Question

Wenn die Eingabeauswahl in ein HTML-Formular geladen wird, sind die Daten vom Back-End manchmal nicht bereit und die Auswahl wird ohne Auswahl einer Option angezeigt.

Kann es möglich sein zu warten, dass die Daten geladen werden, bevor Sie die Eingabe auf der Seite schreiben?

oder es gibt andere Möglichkeiten, die richtige Option abhängig vom Winkelwert auszuwählen.

PS. Ich kann die Daten nicht ändern, die ich vom Back-End bekomme und die ein Array für den All-Wert und eine andere Variable mit der ausgewählten Option sind. Der erste wird immer korrekt geladen, aber manchmal ist der zweite leer, wenn ich eine Option auswählen möchte.

dank

Answer 1

Versuchen Zugang nach Ereignis zu bekommen stateChangeSuccess

$scope.$on('$stateChangeSuccess', function() { 

      (function() { 

      })(); 

     }); 

Answer 2

Ich nehme an, Sie asynchrone Methoden verwenden die Daten zu laden. In diesem Fall sollte Folgendes funktionieren.

Erstens haben solche Auszeichnungs:

<div ng-show="loading"> 
    Loading, please wait... 
    <!-- can also put gif animation instead --> 
</div> 

<select ng-hide="loading">...</select> 

Und in der Steuerung:

$scope.loading = true; 
GetData().then(function() { 
    $scope.loading = false; 
}, function() { 
    $scope.loading = false; 
    alert('error'); 
}); 

Dies vorausgesetzt, dass Sie die Daten in einer Funktion laden, die ein Versprechen gibt, können Sie natürlich nur die setzen $scope.loading = false; Zeile an der richtigen Stelle in Ihrem Code, nachdem die Daten tatsächlich geladen sind.

Der Effekt wird sein, dass während $scope.loading-wahr gesetzt ist, wird der Benutzer die „Laden“ -Meldung sehen, während unten der Tropfen ausgeblendet ist, und wenn Sie es falsch gesetzt ist, wird die Dropdown sichtbar werden während die Meldung "Laden" ausgeblendet wird.

Answer 3

Das ist, wie ich dieses Problem beheben mit AngularJS, Angular Ressourcen & Ui-Router mit Verbindungen in einer Entität ausgewähltes Objekt anzuzeigen:

Da wir in einer einfachen Beziehung zu Unternehmen haben:

Klasse: Name (String), Ebene (String). ----> Eine Klasse in der Schule.

Kind: Name (String), Pseudo (String). ----> Ein Kind.

Ein Kind kann in einer Klasse sein und es gibt viele Klassen in der Schule. So können wir etwas davon haben (ein One-To-One):

Klasse: Name (String), Ebene (String). ----> Eine Klasse in der Schule.

Kind: Name (String), Pseudo (String), Klasse (Klasse). ----> Ein Kind.

In meinem Ui-Router Zustand, den ich so etwas tun, wenn ein Kind Bearbeitung: , dass der Zustand des Kindes zu bearbeiten, wenn Sie auf einen Link, um es entsprechende wir ihn abfragen und einen Controller verwenden zu lösen die Entität, die mit ihm verbunden ist.

.state('child-edit', { 
    parent: 'entity', 
    url: '/child/{id:int}', 
    views: { 
     'content@': { 
      templateUrl: 'path/to/chil/view/child-edit.html', 
      controller: 'ChildEditController' 
     } 
    }, 
    resolve: { 
     translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) { 
      $translatePartialLoader.addPart('child'); 
      return $translate.refresh(); 
     }], 
     entity: ['$stateParams', 'ChildService', function($stateParams, ChildService) { 
      // We return the child to edit using a service. 
      return ChildService.get({id : $stateParams.id}); 
     }] 
    } 
}) 

Das ist der Controller ich diesen Lauf normalerweise machen verwenden:

angular.module('myApp').controller('ChildEditController', 
    ['$scope', '$stateParams', '$q', 'entity', 'ClassService', 
     function($scope, $stateParams, $q, entity, ClassService) { 

     // We get all classes of school here. 
      $scope.classes = ClassService.query(); 

     // That is the promise of child to edit get from resolve in state. 
     $scope.childToEdit = entity; 

     $q.all([$scope.classes.$promise, $scope.childToEdit.$promise]).then(function() { 
      // When all data are resolved 

      // In Js two objects with same properties and valyes but different memory allocation are different. 
      // So I test value of Id before setting the right class of this child and angular will make able to edit 
      // him in the UI with the ng-model 
      var classOfChild = $scope.childToEdit.class; 

      for (var k in $scope.classes) { 
       if ($scope.classes[k].id === classOfChild.id) { 
        // We put the same reference of this class: then it will be selected in the UI of select box 
        $scope.childToEdit.class = $scope.classes[k]; 
       } 
      } 
     }); 
}]); 

und die damit verbundene UI in HTML:

<!-- The name of Child --> 
<div class="form-group"> 
    <div class="col-md-4"> 
     <label for="field_child_name">Name of Child</label> 
     <input type="text" class="form-control" name="name" id="field_child_name" 
         ng-model="childToEdit.name" 
         required /> 
    </div> 
</div> 

<!-- Selected class of child will be display here with all other classes available --> 
<div class="form-group"> 
    <div class="col-md-4"> 
     <label for="field_child_class">Class of Child</label> 
     <select class="form-control" id="field_child_class" name="class" ng-model="childToEdit.class" ng-options="class as class.name + ' : ' + class.level for class in classes"> 
      <option value=""></option> 
     </select> 
    </div> 
</div> 

Hinweis: Hoffe, es ist die gleiche Situation, in der Die ausgewählten Daten werden nicht angezeigt, da sich die Referenzen der abfragenden Klasse und der Eigenschaftenklasse im untergeordneten Objekt unterscheiden.