禁用 form/page 直到加载控件的 API 完成

Question

我有一个使用 select 元素的 HTML 表单。 select 元素的选项通过 API 调用填充。我发现有时页面似乎已完成加载，但 select 元素尚未填充。我正在寻找一种方法来禁用该页面或指示它在从 API.

填充 select 元素之前未完成加载

我有一个单独的控制器来处理 select 元素的填充以及将表单数据提交到后端 API 的提交按钮单击事件。下面是我的 Angular 和包含 select 元素的 HTML 片段。

HTML

<select ng-model="self.form.UserName" 
    ng-options="user.Name as user.Name for user in self.userList" 
    ng-required="true">
    <option value="">- Choose User -</option>
</select>

Angular

<script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.controller('myAppController', function ($scope, $http) {
        var self = this;
        self.userList= [];

        $http({
            method: 'GET',
            url: 'https://myApi.local/api/users/getAllUsers',
            headers : {
                'Content-Type': 'application/json'
            }
        }).then(function(result) {
            self.userList= result.data;
        }, function (error) {
            console.log(error);
        });

        self.submitFormData = function() {
            // form data submission handled  here
        }
    });
</script>

这样可以很好地利用 ng-cloak 来隐藏整个页面吗？

Answer 1

我会更像这样发出呼声以获得 finally 块。我会在页面上显示一个微调器，并阻止用户在它运行时触摸它后面的任何东西。这样，用户就知道页面仍在加载，无法与未填充的下拉列表进行交互。

    $scope.showSpinner = true;
    $http({
        method: 'GET',
        url: 'https://myApi.local/api/users/getAllUsers',
        headers : {
            'Content-Type': 'application/json'
        }
    }).then(function(result) {
        self.userList= result.data;
    }).error(function (error) {
        console.log(error);
    }).finally(function(){
    $scope.showSpinner = false;
    });

禁用 form/page 直到加载控件的 API 完成

Disable form/page until APIs that load controls are complete

angularjs

ngcloak