Javascript 处理角度双向绑定以占用DOM渲染时间

我看不到最快双向绑定的加载标签

我有一个显示和隐藏装载标签的标志。但是我看不到装货标签。因为角度渲染（绑定）的速度非常快

---

期望1：- 因此，我想在渲染回调为开始和结束时显示和隐藏

isloading

标志。我希望这是解决问题的正确方法。可能吗

期望2：- 我已经检查了堆栈溢出，然后建议使用

$timeout

。但我认为这不是一个好的解决方案。但是如果我们不能实现我的第一个期望，那么我可以使用

$timeout

方法。但是这里我没有将近似时间设置为$timeout函数，我将在$timeout函数上设置精确的DOM渲染时间。

---

我为这个问题编写了以下代码片段，您可以轻松地编写一个代码片段来回答

angular.module（“app”，[]）.controller（“controllerApp”，函数（$scope）
{
$scope.IsLoading=true；
//现在开始数据绑定和渲染
$scope.data=[
{
“FieldGroupName”：“一般信息”，
“cocVersionDataFieldCollection”：[
{
“DocumentVersionFieldId”：1，
“FieldGroupName”：“一般信息”，
“字段前缀”：“0.1”，
“FieldName”：“Make”，
“显示顺序”：1，
“IsMultiElement”：错误，
“FieldGroupID”：0，
“IsMultiRowExist”：false，
“IsMultiLanguage”：错误，
“FieldValueCobName”：“11”，
“IsOptionExists”：false，
“IsSalesVersionExists”：错，
“IsMarketingcodeExists”：false，
“IsMandatoryElementDataMissing”：false，
“IsOverridable”：错误，
“varaintData”：{
“版本ID”：“编号；”，
“DocumentVersionFieldId”：“编号”，
“VariantId”：“编号”，
“元素ID”：“编号”，
“ElementVariatid”：“编号”，
“VariantValue”：“字符串”，
“IsRecordVisible”：“布尔值”，
“CoElementLanguageDataCollection”：[]，
“hasValidationError”：“布尔”
}
},
{
“DocumentVersionFieldId”：2，
“FieldGroupName”：“一般信息”，
“字段前缀”：“0.2”，
“字段名”：“类型”，
“显示顺序”：2，
“IsMultiElement”：错误，
“FieldGroupID”：0，
“IsMultiRowExist”：false，
“IsMultiLanguage”：错误，
“FieldValueCobName”：“K”，
“IsOptionExists”：false，
“IsSalesVersionExists”：错，
“IsMarketingcodeExists”：false，
“IsMandatoryElementDataMissing”：false，
“IsOverridable”：错误，
“varaintData”：空
},
{
“DocumentVersionFieldId”：1001，
“FieldGroupName”：“一般信息”，
“字段前缀”：“0.2”，
“字段名”：“变体”，
“显示顺序”：3，
“IsMultiElement”：错误，
“FieldGroupID”：0，
“IsMultiRowExist”：false，
“IsMultiLanguage”：错误，
“FieldValueCobName”：“1”，
“IsOptionExists”：false，
“IsSalesVersionExists”：错，
“IsMarketingcodeExists”：false，
“IsMandatoryElementDataMissing”：false，
“IsOverridable”：是的，
“varaintData”：空
},
{
“DocumentVersionFieldId”：1003，
“FieldGroupName”：“一般信息”，
“字段前缀”：“0.2.1”，
“字段名”：“商业名称”，
“显示顺序”：5，
“IsMultiElement”：错误，
“FieldGroupID”：0，
“IsMultiRowExist”：false，
“IsMultiLanguage”：错误，
“FieldValueCobName”：“1”，
“IsOptionExists”：false，
“IsSalesVersionExists”：错，
“IsMarketingcodeExists”：false，
“IsMandatoryElementDataMissing”：false，
“IsOverridable”：是的，
“varaintData”：空
},
{
“DocumentVersionFieldId”：3，
“FieldGroupName”：“一般信息”，
“字段前缀”：“0.4”，
“字段名称”：“车辆类别”，
“显示顺序”：6，
“IsMultiElement”：错误，
“FieldGroupID”：0，
“IsMultiRowExist”：false，
“IsMultiLanguage”：错误，
“FieldValueCobName”：“11”，
“IsOptionExists”：false，
“IsSalesVersionExists”：错，
“IsMarketingcodeExists”：false，
“IsMandatoryElementDataMissing”：false，
“IsOverridable”：是的，
“varaintData”：空
},
{
“DocumentVersionFieldId”：4，
“FieldGroupName”：“一般信息”，
“字段前缀”：“0.5”，
“FieldName”：“制造商的公司名称和地址”，
“显示顺序”：7，
“IsMultiElement”：正确，
“FieldGroupID”：0，
“IsMultiRowExist”：false，
“IsMultiLanguage”：没错，
“FieldValueCobName”：“地址行2:err；地址行3:12；”，
“IsOptionExists”：false，
“IsSalesVersionExists”：错，
“IsMarketingcodeExists”：false，
“IsMandatoryElementDataMissing”：false，
“IsOverridable”：是的，
“varaintData”：空
},
{
“DocumentVersionFieldId”：5，
“FieldGroupName”：“一般信息”，
“字段前缀”：“0.6”，
“现场名称”：“卫星板的安装位置和方法”，
“显示顺序”：8，
“IsMultiElement”：正确，
“FieldGroupID”：0，
“IsMultiRowExist”：false，
“多种语言”：
<div ng-controller="MyCtrl">
  <span ng-show="isLoading">loading...</span>
  <table ng-repeat="obj in data" ng-show="!isLoading">
    <tr>
      <td>
        <b> {{obj.FieldGroupName}}</b>
        <table style="border:solid 1px dashed; border-color:black">
          <tr ng-repeat="objChild in  obj.cocVersionDataFieldCollection" 
              ng-init="checkLoadingState($index)">
            <td>
              {{objChild.FieldName}}
              <td>
                {{objChild.FieldName}}
                <td>
                  {{objChild.FieldName}}
                </td>
                <td>
                  {{objChild.FieldName}}
                </td>
                <td>
                  {{objChild.FieldName}}
                </td>
          </tr>
        </table>
        </td>
    </tr>
  </table>
</div>

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $timeout) {

  $scope.isLoading = true;

  // now the data binding and rendering is starting 
  $scope.data = [{
    "FieldGroupName": "General Information",
    "cocVersionDataFieldCollection": [{
      "DocumentVersionFieldId": 1,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.1",
      "FieldName": "Make",
      "DisplayOrder": 1,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "11",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": false,
      "varaintData": {
        "VersionId": "number;",
        "DocumentVersionFieldId": "number",
        "VariantId": "number",
        "ElementId": "number",
        "ElementVariantId": "number",
        "VariantValue": "string",
        "IsRecordVisible": "boolean",
        "cocElementLanguageDataCollection": [],
        "hasValidationError": "boolean"
      }
    }, {
      "DocumentVersionFieldId": 2,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.2",
      "FieldName": "Type",
      "DisplayOrder": 2,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "K",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": false,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1001,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.2",
      "FieldName": "Variant",
      "DisplayOrder": 3,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "1",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1003,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.2.1",
      "FieldName": "Commercial Name(s)",
      "DisplayOrder": 5,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "1",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 3,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.4",
      "FieldName": "Vehicle Category",
      "DisplayOrder": 6,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "11",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 4,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.5",
      "FieldName": "Company Name and Address of the manufacturer",
      "DisplayOrder": 7,
      "IsMultiElement": true,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": true,
      "FieldValueCobmination": "<b>Address Line 2</b>: err; <b>Address line 3</b>: 12; ",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 5,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.6",
      "FieldName": "Location and method of attachent of satutory plates",
      "DisplayOrder": 8,
      "IsMultiElement": true,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": true,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1004,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.6",
      "FieldName": "Location of the vechicle identification number",
      "DisplayOrder": 9,
      "IsMultiElement": true,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": true,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }]
  }, {
    "FieldGroupName": "General Construction Characteristics",
    "cocVersionDataFieldCollection": [{
      "DocumentVersionFieldId": 7,
      "FieldGroupName": "General Construction Characteristics",
      "FieldPrefix": "1",
      "FieldName": "Number of Axles",
      "DisplayOrder": 10,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1023,
      "FieldGroupName": "General Construction Characteristics",
      "FieldPrefix": "1",
      "FieldName": "Number of Wheels",
      "DisplayOrder": 11,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 8,
      "FieldGroupName": "General Construction Characteristics",
      "FieldPrefix": "3",
      "FieldName": "Powered Axles",
      "DisplayOrder": 12,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1033,
      "FieldGroupName": "General Construction Characteristics",
      "FieldPrefix": "3",
      "FieldName": "Powered Axles Position",
      "DisplayOrder": 13,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": true,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }]
  }, {
    "FieldGroupName": "Main Dimensions",
    "cocVersionDataFieldCollection": [{
      "DocumentVersionFieldId": 9,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "4",
      "FieldName": "Wheel Base",
      "DisplayOrder": 13,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "454",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1007,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "4.1",
      "FieldName": "Axle spacing",
      "DisplayOrder": 14,
      "IsMultiElement": true,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 10,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "5",
      "FieldName": "Length",
      "DisplayOrder": 15,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 11,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "6",
      "FieldName": "Width",
      "DisplayOrder": 16,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 12,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "7",
      "FieldName": "Height",
      "DisplayOrder": 20,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "15634",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }]
  }];

 var itemCount = 0;
 var currentItem = 0;

  // now the data binding and rendering is ending    
  $scope.data.forEach(function (data) {
    itemCount += Object.keys(data.cocVersionDataFieldCollection).length;
  });


  $scope.checkLoadingState = function (index) {

    currentItem++;

    if (itemCount === currentItem) {
      $timeout(function () {
        $scope.isLoading = false;
      }, 250);
    }
  }
});