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> 

注：希望這是相同的情況下所選數據不會顯示，因爲查詢子對象中的類和屬性類的引用是不同的。