加载时AngularJS View不会显示

Question

我有一个简单的视图，需要2秒才能加载。 我还有一个加载覆盖，它检查$ http.pendingRequests以显示Loading-Overlay。

首先显示Overlay，它是什么，然后View弹出。 我需要在加载完成之前显示视图，以便实际覆盖Overlay。

帮助请:(

更新：Controller.js代码

(function () {
"use strict";

angular
    .module("myApp")
    .controller("SearchController", SearchController);

SearchController.$inject = ["$state", "$stateParams", "$scope", "$rootScope", "$searchCache", "fswConvert", "fswAjaxPostPlain", "fswAjaxPost", "runtimeProvider"];

function SearchController($state, $stateParams, $scope, $rootScope, $searchCache, fswConvert, fswAjaxPostPlain, fswAjaxPost, runtimeProvider) {

        var vm = this;

        vm.ShowSearchResult = false;

        vm.init = function () {
            // Set page-size before processing the form to avoid multiple read events.
            var cachePageSize = $searchCache.get("PageSize");
            var currentPageSize = $("#SearchResultGrid").data("kendoGrid").dataSource.pageSize();
            if (cachePageSize && cachePageSize !== currentPageSize) {
                $("#SearchResultGrid").data("kendoGrid").dataSource.pageSize($searchCache.get("PageSize"));
            }

            if ($searchCache.get("LastSearch")) {

                var lastSearch = $searchCache.get("LastSearch");
                $("#Nachname").val(lastSearch.Nachname);
                $("#Vorname").val(lastSearch.Vorname);
                $("#Geburtsdatum").data("kendoDatePicker").value(lastSearch.Geburtsdatum);
                $("#SvnrTyp").data("kendoDropDownList").value(lastSearch.SvnrTyp);
                $("#Sozialversicherungsnummer").data("kendoMaskedTextBox").value(lastSearch.Sozialversicherungsnummer);
                $("#Kundennummer").data("kendoMaskedTextBox").value(lastSearch.Kundennummer);
                $("#Verstorben").prop("checked", lastSearch.Verstorben);
                $("#PhoneticSearch").prop("checked", lastSearch.PhoneticSearch);
                $("#PostleitzahlSearch").prop("checked", lastSearch.PostleitzahlSearch);
                $("#PostleitzahlValue").val(lastSearch.PostleitzahlValue);

                vm.processForm();
            }
        };

        vm.reset = function () {
            $searchCache.remove("LastSearch");
            $state.go("search", {}, { reload: true });
        };

        vm.showKendoValidationErrors = function () {
            var validatable = $("#SearchForm").data("kendoValidator");

            if (validatable.errors()) {
                $rootScope.$apply(function () {
                    $rootScope.errors = validatable.errors();
                });
            }
            else {
                $rootScope.$apply(function () {
                    $rootScope.errors = [];
                });
            }
        };
        vm.hasFilter = function () {
            var nachname = $("#Nachname").val();
            var vorname = $("#Vorname").val();
            var geburtsdatum = $("#Geburtsdatum").data("kendoDatePicker").value();
            var svnrTyp = $("#SvnrTyp").data("kendoDropDownList").value();
            var sozialversicherungsnummer = $("#Sozialversicherungsnummer").data("kendoMaskedTextBox").value();
            var kundennummer = $("#Kundennummer").data("kendoMaskedTextBox").value();
            var plz = $("#PostleitzahlValue").val();

            return (nachname
                || vorname
                || geburtsdatum
                || (svnrTyp && svnrTyp !== 1)
                || sozialversicherungsnummer
                || kundennummer
                || plz);
        };

        vm.getSearchData = function (forGet) {
            var result = {
                Nachname: $("#Nachname").val(),
                Vorname: $("#Vorname").val(),
                SvnrTyp: $("#SvnrTyp").data("kendoDropDownList").value(),
                Sozialversicherungsnummer: $("#Sozialversicherungsnummer").data("kendoMaskedTextBox").raw(),
                Kundennummer: $("#Kundennummer").data("kendoMaskedTextBox").raw(),
                Verstorben: $("#Verstorben").is(":checked"),
                PhoneticSearch: $("#PhoneticSearch").is(":checked"),
                PostleitzahlSearch: $("#PostleitzahlSearch").is(":checked"),
                PostleitzahlValue: $("#PostleitzahlValue").val()
            };

            if (forGet) {
                if ($("#Geburtsdatum").data("kendoDatePicker").value()) {
                    result.Geburtsdatum = fswConvert.fswDateConvert("#Geburtsdatum");
                }
                else {
                    result.Geburtsdatum = null;
                }
            }
            else {
                result.Geburtsdatum = $("#Geburtsdatum").val();
            }
            return result;
        };

        vm.processForm = function () {
            if (vm.hasFilter()) {
                vm.ShowSearchResult = true;

                var grid = $("#SearchResultGrid").data("kendoGrid");

                grid.dataSource.transport.options.read.url = runtimeProvider.BaseUrl + "/Search/SearchResultRead";
                grid.dataSource.transport.options.read.data = vm.getSearchData(false);
                grid.dataSource.page(1);

                $searchCache.put("LastSearch", vm.getSearchData());
            }
            else {
                $rootScope.errors = ["Es muss zumindest ein Suchkriterium ausgefüllt sein um die Suche zu starten."];
            }
        };

        vm.processFormCreate = function (htmlPart) {
            $state.go("create", { searchParams: vm.getSearchData(true) });
        };

        vm.openPersonOverview = function (personId) {
            $state.go("person.overview", { personId: personId });
        };

        vm.cachePageSize = function () {
            var pageSize = $("#SearchResultGrid").data("kendoGrid").dataSource.pageSize();
            $searchCache.put("PageSize", pageSize);
        };


        vm.init();
    }

})();

Controller.cs代码：

{
    [AuthorizeRead]
    [NoCache]
    public class SearchController : BasePersonController
    {
        #region Properties.

        private const int ITEMS_PER_PAGE = 10;

        #endregion

        #region Search Actions.

        [HttpGet]
        [NoCache]
        public ActionResult KundInnenViaExternal(string hookBack)
        {
            Response.Cache.SetCacheability(HttpCacheability.NoCache);

            ViewBag.ActiveSubPage = hookBack.DecodeAsUrlParameter(); //for Toolbar

            return View("Search", new PersonSearchModel() {ExternalHook = ViewBag.ActiveSubPage});
        }

        [HttpGet]
        public ActionResult KundInnen()
        {
            return View("Search");
        }

        [HttpPost]
        [AjaxOnly]
        [NoCache]
        [ValidateAntiForgeryToken]
        public ActionResult KundInnen(PersonSearchModel model)
        {
            Response.Cache.SetCacheability(HttpCacheability.NoCache);

            if (!string.IsNullOrWhiteSpace(model.ExternalHook))
                ViewBag.ActiveSubPage = model.ExternalHook; //for Toolbar

            if (!model.HasFilters)
                ModelState.AddModelError("NoFilters", "Es muss zumindest ein Suchkriterium ausgefüllt sein um die Suche zu starten.");

            return BuildJsonPostResult("Search", model);
        }

        [HttpPost]
        [AjaxOnly]
        [HandleKendoError]
        public ActionResult SearchResultRead([DataSourceRequest] DataSourceRequest request, PersonSearchModel model)
        {
            if (!ModelState.IsValid || model == null || !model.HasFilters)
                return null;

            model.IncludePersonFunktion = Enum.GetValues(typeof (EPersonFunktionType)).Cast<EPersonFunktionType>().Where(x => x != EPersonFunktionType.SachwalterProfessionell && x != EPersonFunktionType.VertreterInProfessionell).ToList();

            PersonSearchResultModel searchResult = PerformSearch(request, model, request.PageSize);

            return Json(new DataSourceResult
            {
                Data = searchResult.Personen,
                Total = searchResult.TotalAmount
            });
        }

        #endregion

        #region Create Actions.

        [HttpGet]
        public ActionResult CreateKunde(PersonSearchModel model)
        {
            var createModel = new PersonCreateModel
            {
                Vorname = model.Vorname,
                Nachname = model.Nachname,
                DefaultSozialversicherungsnummer = new Sozialversicherungsnummer { Svnr = model.Sozialversicherungsnummer },
                AdditionalSozialversicherungsnummern = new List<Sozialversicherungsnummer> { new Sozialversicherungsnummer { SvnrTyp = ESvnrTyp.Auslaendisch } },
                Geburtsdatum = model.Geburtsdatum,
                GeburtslandOesterreich = CollectionCommands.GetGeburtslandOesterreich().Id,
                Funktion = EPersonFunktionType.Kunde,
            };
            createModel.Staatsbuergerschaft = new StaatsbuergerschaftModel();
            createModel.Staatsbuergerschaft.Aufenthaltsstatus = new AufenthaltsstatusModel();
            createModel.Staatsbuergerschaft.Aufenthaltsstatus.AufenthaltUnbefristet =
                CollectionCommands.GetAufenthaltstitelUnbefristet().ToList();

            return PartialView("../Person/Create", createModel);
        }

        #endregion

        #region Abstract methods implementation.

        protected override ActionResult ExecuteWriteCreatePerson(PersonCreateModel model)
        {
            throw new NotImplementedException("Das Erzeugen einer Person wird nicht über den \"SearchController\" bereitgestellt.");
        }

        protected override ActionResult ExecuteWriteUpdatePerson(PersonUpdateModel model)
        {
            throw new NotImplementedException("Das Bearbeiten einer Person wird nicht über den \"SearchController\" bereitgestellt.");
        }

        #endregion
    }
}