gpt4 book ai didi

javascript - 处理 Angular 双向绑定(bind)以占用 DOM 渲染时间

转载 作者:行者123 更新时间:2023-11-28 04:11:43 24 4
gpt4 key购买 nike

我看不到最快双向绑定(bind)的加载标签。

我有一个用于显示和隐藏加载标签的标志。但我看不到装载标签。因为 Angular 的渲染(绑定(bind))速度非常快。

<小时/>

期望 1:-

So I want to show and hide the isloading flag while rendering callback is start and end. I hope this is the proper way to my solution. Is it possible?

期望 2:-

And I have check with stack overflow, then are suggest to use $timeout. But I don't think this is a good solution. But if we can't do my first expectation then I can go with the $timeout way. But here I don't set approximate time to $timeout function, I would be set exact DOM rendering time on the $timeout function.

<小时/>

我为该问题制作了以下代码片段,您可以轻松地做出代码片段答案。

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>

最佳答案

您可以尝试同步您的 DOM/应用程序,就像这个简单的 demo fiddle 一样。 。它确保 ng-repeat 在显示之前渲染了所有项目。同时显示loading。我认为这是一个小技巧,但如果你真的想同步,它就像一个魅力。您的 DOM 和 JS 应用程序。 IMO 这不是必需的,因为 E2E 绑定(bind)始终是异步的,而且没问题。

查看

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

关于javascript - 处理 Angular 双向绑定(bind)以占用 DOM 渲染时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46216260/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com