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

Question

当输入选择被加载到HTML表单中时，有时从后端获取的数据还没有准备好，并且选择在没有选择任何选项的情况下显示。

在写入页面中的输入选择之前，是否可以等待数据加载？

或者有其他方法可以根据角度值选择正确的选项。

PS。我无法更改从后端获取的数据，而且这些数据不是用于所有值的数组，而是具有所选选项的另一个变量。第一个总是正确加载，但有时第二个是空的，当我想选择一个选项。

感谢

Answer 1

试图让后事件stateChangeSuccess

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

      (function() { 

      })(); 

     }); 

Answer 2

我假设你正在使用异步方法来加载数据的访问。在这种情况下，以下应该工作。

首先，有这样的标记：

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

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

和Controller：

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

这是假设您在返回无极函数加载数据，当然你也可以只是把$scope.loading = false;行代码中的正确位置，数据实际加载后。

的影响将是，虽然$scope.loading设置为真，用户将看到“加载”消息，而下拉是隐藏的，当你把它设置为假，下拉将变得可见而“加载”消息将隐藏。

Answer 3

这就是我如何解决使用AngularJS，角资源& UI路由器与关系的实体显示所选对象这个问题：

鉴于我们已给实体在一个简单的关系：

类：name（String），level（String）。 ---->在学校上课。

Child：name（String），pseudo（String）。 ---->一个孩子。

一个孩子可以一次在一个班级，并且在学校有很多班。 所以我们可以有这样的事情（一对一）：

Class：name（String），level（String）。 ---->在学校上课。

子：name（String），pseudo（String），class（Class）。 ---->一个孩子。

在我的UI路由器的状态我做这样的事情在编辑一个孩子时： 这是孩子的状态进行编辑，当点击与其对应的链接，我们询问了他和使用控制器来解决上与他有关的实体。

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

这是我使用，使这种正常运行的控制器：

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

而在HTML相关的UI：

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

注：希望这是相同的情况下所选数据不会显示，因为查询子对象中的类和属性类的引用是不同的。