AngularJS：在編寫HTML之前等待上下文被加載

Question

當輸入選擇以HTML格式加載時，有時無法從后端獲取數據，並且未選擇任何選項就顯示選擇。

在將輸入選擇寫入頁面之前，是否可以等待數據加載？

或者有其他方法可以根據角度值選擇正確的選項。

PS。 我無法更改從后端獲取的數據，這些數據是所有值和帶有選定選項的另一個變量的una數組。 當我要選擇一個選項時，第一個總是正確加載，但有時第二個是空的。

謝謝

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>

並在控制器中：

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

假設您將數據加載到返回Promise的函數中，那么您當然可以將$scope.loading = false;放進去$scope.loading = false; 實際加載數據后，在代碼中的正確位置插入一行。

這樣的效果是，當$scope.loading設置為true時 ，用戶將在隱藏下拉菜單的同時看到“ Loading”消息，而當您將其設置為false時 ，在“ Loading”下拉列表中將可見消息將被隱藏。

Answer 3

這就是我使用AngularJS，Angular Resource和Ui-router在具有Relationship的實體中顯示選定對象的方法：

鑒於我們必須以簡單的關系進行實體化：

類：名稱（字符串），級別（字符串）。 ---->在學校上課。

子級：名稱（字符串），偽（字符串）。 ---->一個孩子。

一個孩子可以一次上一堂課，而且學校里有很多課。 所以我們可以有這樣的東西（一對一）：

類：名稱（字符串），級別（字符串）。 ---->在學校上課。

子級：名稱（字符串），偽（字符串），類（類）。 ---->一個孩子。

在我的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>

注意：希望與未顯示所選數據的情況相同，因為子對象中查詢類和屬性類的引用不同。