Работа с угловой двусторонней привязкой, чтобы занять время рендеринга DOM

Я не вижу метку загрузки для быстрого двустороннего связывания.

У меня есть флаг для отображения и скрытия метки загрузки. но я не могу увидеть метку загрузки. потому что angular рендерит (привязывает) очень скорость.

Ожидание 1:-

Итак, я хочу показать и скрыть флаг isloading, пока обратный вызов рендеринга начинается и заканчивается. Я надеюсь, что это правильный путь к моему решению. Является ли это возможным?

Ожидание 2:-

И у меня есть проверка с переполнением стека, тогда предлагается использовать $timeout. Но я не думаю, что это хорошее решение. Но если мы не можем выполнить мое первое ожидание, я могу пойти по пути $timeout. Но здесь я не устанавливаю приблизительное время для функции $timeout, я бы установил точное время рендеринга DOM в функции $timeout.

Я сделал следующий фрагмент для проблемы, и вы можете легко сделать фрагмент ответа.

angular.module("app",[]).controller("controllerApp", function($scope)
{
$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
          }
        ]
      }          
    ];   
    // now the data binding and rendering is ending              
   $scope.IsLoading=false;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controllerApp">
    <span ng-show="IsLoading">loading...</span>
    <table ng-repeat="obj in data">
        <tr >
            <td>
                <b> {{obj.FieldGroupName}}</b>
                <table style="border:solid 1px dashed; border-color:black">
                    <tr ng-repeat="objChild in  obj.cocVersionDataFieldCollection">
                        <td>{{objChild.FieldName}}</td>
                        <td>{{objChild.FieldName}}</td>
                        <td>{{objChild.FieldName}}</td>
                        <td>{{objChild.FieldName}}</td>
                        <td>{{objChild.FieldName}}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

Ramesh Rajendran 14.09.2017 источник

comment

$timeout !! Мы используем 250ms, чтобы обеспечить отображение загрузки. 250 или 300 мс = время перехода страницы по умолчанию на мобильных устройствах. Это число также подходит при использовании других анимаций. - lin 14.09.2017

comment

Но что делать, если длина данных изменяется во время выполнения? - Ramesh Rajendran 14.09.2017

Ответы (1)

arrow_upward
0
arrow_downward

Вы можете попробовать синхронизировать DOM/приложение, как в этой простой демонстрационной скрипте. Это гарантирует, что ng-repeat отобразил все элементы перед его отображением. Тем временем отображается loading. Я думаю, что это небольшой хак, но он работает как шарм, если вы действительно хотите синхронизироваться. ваше приложение DOM и JS. IMO, в этом нет необходимости, потому что привязка E2E все время асинхронна, и это нормально.

Вид

<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>

Приложение AngularJS

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); } } });

lin 14.09.2017

Работа с угловой двусторонней привязкой, чтобы занять время рендеринга DOM

Ожидание 1:-

Ожидание 2:-

Ответы (1)

Вид

Приложение AngularJS

Вопросы по теме