Question

我的应用程序的目标是通过html参数指令数据绑定加载更大量的数据，并随后在Angular ui-grid中显示此数据。

这个问题是初始化非常缓慢，随着我的数据变大，这种情况会变慢。

我尝试过很多解决方案，但似乎没有什么能增加我的初始时间。代码看起来像这样

(function (root, factory) { //To make an app ready for dependency injection
    if (typeof module !== 'undefined' && module.exports) {
        // CommonJS
        module.exports = factory(require('angular'));
    } else if (typeof define === 'function' && define.amd) {
        // AMD
        define(['angular'], factory);
    } else {
        // Global Variables
        factory(root.angular);
    }
}(this, function (angular) {

    'use strict';
     var app = angular.module('rpTabelaSerije', ['ngRoute', 'ngDialog', 'ui.grid', 'ui.grid.edit',
        'ui.grid.cellNav', 'ui.grid.resizeColumns', 'ui.grid.autoResize'
    ]);

    return app;
}))

然后是主要指令

app.directive('rpTabelaSerije', function (ngDialog, $rootScope, $timeout, $http, $templateCache, $compile) {
    return {
        restrict: 'E',
        scope: {
            rb:"=",
            x:"=rpx",
            y:"=rpy",
            id:"=rpid",
            enabled: '=rpenabled',
            edit: '=rpedit',
            dodavanje: '=rpdodavanje',
            brisanje: '=rpbrisanje',
        },
        template: '<div id="tabela" ui-grid="gridOptions" ui-grid-infinite-scroll ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-exporter ui-grid-auto-resize class="uk-container-center tabelarniPrikaz uk-margin-large-top"></div>',
        controller: function ($scope, $element,uiGridConstants) {
                $scope.serije = [];
                $scope.gridOptions = {
                enableColumnMenus: false,
                enableSorting: false,
                enableGridMenu: true,
                enableRowHeaderSelection: false,
                enableSelectAll: true,
                multiSelect: true,
                modifierKeysToMultiSelectCells: true,
                enableFiltering: false,
                flatEntityAccess: true,             
                        columnDefs: [{
                            name: 'id',
                            displayName: '#',
                            type: 'number',
                            width: 30,
                            enableCellEdit: false
                                            }, {
                            name: 'x',
                            displayName: 'Datum',
                            type: 'date',
                            width: 137,
                            enableCellEdit: false
                                            }, {
                            name: 'y',
                            displayName: 'Vrednost',
                            type: 'number',
                            width: 80,
                            enableCellEdit: true
                        }]  
            }; 
        },
        link: function (scope, element, attrs) {
                    scope.serije = scope.$eval(attrs['rpserije']); //Here is like this because I taught that one-way binding will solve the problem (but its the same as if I pass it as a scope inherited parameter) 
                    console.log(scope.serije);
                    scope.gridOptions.data = scope.serije[0].podaciSerije;
        }

    };

});

打算像这样使用

<rp-tabela-serije id="rptabela" rpenabled="true" rpedit="true" rpbrisanje="true" rpdodavanje="true" rpx="'x'" rpy="'y'" rpid="'id'" rpserije= // here any raw object can be inserted from other scopes, etc //><rp-tabela-serije>

使用这样的样本数据

[
    {
        "id"  : 1,
        "y"  : 19.15,
        "x"  : "2014-03-02 00:03:00"
    }
]

对于3500个数据点，此设置往往在显示内容之前初始化8-10秒（我需要20000+数据），即10000，它无限期挂起。

一件好事（应用程序在页面上立即显示）是$ http.get的使用，以便从服务器json文件加载数据（如在ui-grid教程here中）。但遗憾的是我不能在这里使用外部文件，因此必须通过范围继承或直接从html标记参数传递它们。

我还尝试在$ templateCache中预加载模板，并在编译期间使用preLink和postLink函数，但每次都是相同的。有任何想法吗？

Angular app使用ui-grid和更大的数据缓慢初始化

0 个答案: