Question

我正在处理使用angularjs和angular-datatables向用户显示的1000行数据（员工）。只要我没有加载详细信息指令来加载详细信息页面以及员工上的其他数据并将其显示为模态，事情就可以正常工作。

数据在94ms内检索。如果不包含指令，则页面加载大约需要2秒。使用该指令，页面加载可能需要20多秒。

我理解，在为每一行加载和填充指令时，它会减慢页面加载时间，但必须有一种方法来构建它，以便它更有效。

js确实打了两个电话。第一个要求是检索员工的初始负载。第二个是检索指令的员工详细信息。

我应该执行单个查询并让服务返回所有数据吗？有没有办法可以延迟加载数据，以便只在点击事件期间调用GetEmployeeDetails？

以下是相关代码：

HTML

<tr ng-repeat="employee in directory.employees">
    <td>{{ employee.LastName }}</td>
    <td>{{ employee.FirstName }}</td>
    <td>{{ employee.Title }}</td>
    <td>{{ employee.DeptAbbr + " | " + employee.OfficeAbbr }}</td>
    <td>
        <div id="container">
            <div id="left">
                <a href="mailto:{{employee.Email}}" title="{{employee.Email}}" ></a>
            </div>
            <div id="right" ng-controller='DetailsController'>
                <img class="to-pointer" src="/includes/images/icons/card-address.png" ng-click="toggleModal()" title="View Contact" />
                <details visible="showModal" modalClass = "modal-sm" templateUrl="details.html"></details>
            </div>
            <div style="clear:both;"></div>
        </div>
    </td>
</tr>

controller.js

directoryApp
.controller('DirectoryCtrl', function($resource, 
                $scope, 
                DTOptionsBuilder, 
                DTColumnDefBuilder) {

        var vm = this;
        vm.employees = [];
        vm.dtOptions = DTOptionsBuilder
            .newOptions()
            .withPaginationType('full_numbers')
            .withDisplayLength(10);
        vm.dtColumnDefs = 
        [
            DTColumnDefBuilder
                .newColumnDef(4)
                .notSortable()
        ];

    $resource('site.com/api/employee/Get')
            .query()
            .$promise
            .then(function(employees) {
                vm.employees = employees;
            });
})
.controller('DetailsController', function($resource, 
                $scope, 
                DTOptionsBuilder,
                DTColumnDefBuilder) {

        var vm = this;
        vm.employee;
        vm.dtOptions = DTOptionsBuilder
            .newOptions()
            .withPaginationType('full_numbers').withDisplayLength(10);
        vm.dtColumnDefs =
        [
            DTColumnDefBuilder
                .newColumnDef(4)
                .notSortable()
        ];

        $resource('site.com/api/employee/GetEmployeeDetails/')
            .query()
            .$promise
            .then(function(employee) {
                vm.employee = employee;
            });     
});

在angularjs的ng-repeat中改进指令的加载时间

0 个答案: