AngularJS ng-cloak在显示页面时不起作用

Question

表单的隐藏逻辑必须加载所有数据，然后在正确加载任务时显示。表单将显示，几秒钟后将显示。我尝试了 ng-cloak 但没有工作 谢谢

var myInit = function() {

    ApplicantId = $location.search()['ID'];

    $http({
        method: 'GET',
        url: 'json/ApplicantSearchList.php?ID=1',
      }).then(function(response) {

        $scope.NationalityList = response.data;

        return $http({
          method: 'GET',
          url: 'json/ApplicantSearchList.php?ID=2',
        });

      }).then(function(response) {
        $scope.ReligionList = response.data;


        return $http({
          method: 'GET',
          url: 'json/Users.php?Active=1',
        });

      }).then(function(response) {

        $scope.UserList = response.data;

        return $http({
          method: 'GET',
          url: 'json/ManpowerRequest.php?Status=1',
        });

      }).then(function(response) {

        $scope.ManpowerList = response.data;


        return $http({
          method: 'GET',
          url: 'json/Province.php',
        });

      }).then(function(response) {

        $scope.RegionList = response.data;

        return $http({
          method: 'GET',
          url: 'json/ApplicantSearchList.php?ID=3',
        });

      }).then(function(response) {
        $scope.SkillList = response.data;

        return $http({
          method: 'GET',
          url: 'json/ApplicantSearchList.php?ID=4',
        });

      }).then(function(response) {
        $scope.SkillCategoryList = response.data;

        return $http({
          method: 'GET',
          url: 'json/ApplicantSearchList.php?ID=5',
        });
      }).then(function(response) {

        $scope.result = response.data;

        angular.forEach($scope.result, function(value, key) {

          $scope.TechnicalData = {
            ID: 0,
            CriteriaName: value.CriteriaName,
            CriteriaPoor: 0,
            CriteriaGood: 0,
            CriteriaFair: 0,
            CriteriaExcellent: 0,
          }
          $scope.TechnicalCategorialList.push($scope.TechnicalData);
        });

        return $http({
          method: 'GET',
          url: 'json/JobTitle.php',
        });


      }).then(function(response) {

        $scope.JobTitleList = response.data;

        return $http({
          method: 'GET',
          url: 'json/ApplicationSource.php',
        });

      }).then(function(response) {
        $scope.ApplicationSourceList = response.data;

        return $http({
          method: 'GET',
          url: 'json/Company.php',
        });

      }).then(function(response) {
        $scope.CompanyList = response.data;

        return $http({
          method: 'GET',
          url: 'json/Agent.php',
        });

      }).then(function(response) {
        $scope.AgentList = response.data;

        $scope.ApplicantId = $location.search()['ID'];



        if ($scope.ApplicantId != undefined) {

          return $http({
            method: 'GET',
            url: 'json/Applicant.php?ID=' + ($location.search()['ID']),
          });
        }
      }).then(function(response) {
          if ($scope.ApplicantId != undefined) {

            var result = response.data

            $scope.ApplcaintNoId = result[0].ApplcaintNoId;

            $scope.ApplicantCode = result[0].ApplicantCode;
            $scope.FirstName = result[0].FirstName;
            $scope.MiddleName = result[0].MiddleName;
            $scope.LastName = result[0].LastName;

            var index = 0;
            var currentIndex = 0;
            var PositionApply1 = result[0].PositionApply1;

            //position applied primary
            angular.forEach($scope.JobTitleList, function(value, key) {

              if (value.JobTitleId == PositionApply1) {
                currentIndex = index;
              }
              index++;
            });
            $scope.selectedPosition1 = $scope.JobTitleList[currentIndex];

            //position applied secondary
            index = 0;
            currentIndex = 0;
            var PositionApply2 = result[0].PositionApply2;

            angular.forEach($scope.JobTitleList, function(value, key) {

              if (value.JobTitleId == PositionApply2) {
                currentIndex = index;
              }
              index++;
            });
            $scope.selectedPosition2 = $scope.JobTitleList[currentIndex];

            $scope.DateApplied = new Date(result[0].DateApplied).format("%m/%d/%Y");


            //gender
            index = 0;
            currentIndex = 0;
            var Gender = result[0].Gender;

            angular.forEach($scope.GenderList, function(value, key) {

              if (value.GenderName == Gender) {
                currentIndex = index;
              }
              index++;
            });
            $scope.selectedGender = $scope.GenderList[currentIndex];

            //region
            currentIndex = 0;
            index = 0;
            var provDesc = result[0].Region;

            angular.forEach($scope.RegionList, function(value, key) {

              if (value.provDesc == provDesc) {
                currentIndex = index;
                // alert(currentIndex);                 
              }
              index++;
            });
            $scope.selectedRegion = $scope.RegionList[currentIndex];


            $scope.BirthDate = new moment(result[0].DateOfBirth).format('MMM DD,YYYY');

            // Nationality
            index = 0;
            currentIndex = 0;
            var Nationality = result[0].Nationality;

            angular.forEach($scope.NationalityList, function(value, key) {

              if (value.Nationality == Nationality) {
                currentIndex = index;
              }
              index++;
            });
            $scope.selectedNationality = $scope.NationalityList[currentIndex];

            $scope.BirthPlace = result[0].BirthPlace;

            //civil status

            index = 0;
            currentIndex = 0;
            var CivilStatus = result[0].CivilStatus;

            angular.forEach($scope.CivilStatusList, function(value, key) {

              if (value.CivilStatusName == CivilStatus) {
                currentIndex = index;
              }
              index++;
            });
            $scope.selectedCivilStatus = $scope.CivilStatusList[currentIndex];

            $scope.Height = result[0].Height;
            $scope.Weight = result[0].Weight;

            // religion
            index = 0;
            currentIndex = 0;
            var Religion = result[0].Religion;

            angular.forEach($scope.ReligionList, function(value, key) {

              if (value.Religion == Religion) {
                currentIndex = index;
              }
              index++;
            });
            $scope.selectedReligion = $scope.ReligionList[currentIndex];


            // highest education
            index = 0;
            currentIndex = 0;
            var HighestEducation = result[0].HighestEducation;

            angular.forEach($scope.EducationList, function(value, key) {

              if (value.EducationName == HighestEducation) {
                currentIndex = index;
              }
              index++;
            });
            $scope.selectedHighestEducation = $scope.EducationList[currentIndex];

            $scope.MobileNo = result[0].MobileNo;
            $scope.Email = result[0].Email;
            $scope.Facebook = result[0].Facebook;
            $scope.Linkedin = result[0].Linkedin;
            $scope.TelHome = result[0].TelHome;
            $scope.TelOffice = result[0].TelOffice;
            $scope.PermanentAddress = result[0].PermanentAddress;
            $scope.ZipCode = result[0].ZipCode;
            $scope.SecondaryAddress = result[0].SecondaryAddress;
            $scope.CurrentLocation = result[0].CurrentLocation;

            //applicaiont source

            index = 0;
            currentIndex = 0;
            var ApplicationSourceId = result[0].ApplicationSourceId;

            angular.forEach($scope.ApplicationSourceList, function(value, key) {

              if (value.ApplicationSourceId == ApplicationSourceId) {
                currentIndex = index;
              }
              index++;
            });
            $scope.selectedApplicationSource = $scope.ApplicationSourceList[currentIndex];
          });

        angular.element(document).ready(myInit);

我将 ng-cloak 放在 body 标签中但没有帮助

<body ng-app="ActivityApp" ng-cloak>

这是我的一些html页面

<div class="form-group"> 
    <label class="control-label col-sm-4 text-danger" for="FirstName">* First Name:</label> 
<div class="col-sm-8">

谢谢

Answer 1

TL;DR：它可能工作正常，只是不像你期望的那样。

ngCloak 指令用于提供样式以在加载导致的 Flash 期间隐藏您的 HTML 模板。您的 init 函数似乎执行了 长链序列 http 请求。看起来您是从控制器内部调用它，所以就 ~component(page/directive) 而言，它已经加载。您可能应该在加载状态期间提供自己的掩码。我建议在调用初始化逻辑之前设置一个加载布尔值，然后在完成初始化 http 请求“dance”后将其清除。它看起来像这样：

$scope.loading = true;

var myInit = function() {

    ApplicantId = $location.search()['ID'];

    $http({
        method: 'GET',
        url: 'json/ApplicantSearchList.php?ID=1',
      }).then(function(response) {
        // snipping most of the chained .then functions for brevity
      }).finally(function(){
        // .finally fires after either all successful .then or error state .catch
        $scope.loading = false;
      });

}

请务必使用有条件地应用于您的 ~component(/page/directive) 的类来隐藏它，类似于 ngCloak 的行为。这假设您有一个 hidden 类的 CSS 规则。

<div ng-class="hidden: loading">
  <!-- content -->
</div>