AngularJS：在编写HTML之前等待上下文被加载

Question

When the input select is loaded in an HTML form, sometimes the data get from the back-end is not ready and the select is displayed without any option selected.

Could be possible to wait that the data is loaded before write the input select in the page?

or there are any other way to select the right option depending on the angular value.

PS. i can't change the data that i get from the back-end and that are una array for the all value and another variable with the selected option. The first one is always loaded correctly but sometimes the second one is empty when i want to select an option.

thanks

Answer 1

Try to get access after event stateChangeSuccess

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

            (function() {

            })();

        });

Answer 2

I assume you're using asynchronous methods to load the data. In such case, the following should work.

First, have such markup:

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

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

And in the controller:

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

This assumes you load the data in a function that returns a Promise, you can of course just put the $scope.loading = false; line in the proper location in your code, after the data is actually loaded.

The effect will be that while $scope.loading is set to true , the user will see the "Loading" message while the drop down is hidden, and when you set it to false , the drop down will become visible while the "Loading" message will become hidden.

Answer 3

That is how I fix this problem using AngularJS, Angular Resource & Ui-router to display selected object in an entity with Relationship:

Given that we have to entity in a simple relationship:

Class: name(String), level(String). ----> A class in school.

Child: name(String), pseudo(String). ----> A Child.

A child can be in one class at a time and there is many classes in school. So We can have something like this(a One-To-One):

Class: name(String), level(String). ----> A class in school.

Child: name(String), pseudo(String), class(Class). ----> A Child.

In my Ui-router state I do something like this when editing a Child: That is the state of the child to edit, when click on a link corresponding to it we query him and use a controller to resolve the entity related to him.

.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});
        }]
    }
})

That is the controller I use to make this run normally:

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];
              }
          }
        });
}]);

And the associated 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>

Note: Hope it is the same situation where the selected data is not displaying because the references of querying class and property class in child object are different.