Question

我有一个横向月历，显示每天员工的活动。

目前它正在使用具有以下层次结构/流程的表

1）控制器：根据选定的月/年生成包含该月每天的数组。 $ scope。$ watchCollection会在年或月更改时更新数组。

由于代码解释了我做得更好：

<table class="table table-bordered table-condensed" ng-controller="PlanningOverviewController">
    <tr>
        <th><input type="text" ng-model="employeefilter"/></th>
        <th colspan="7" ng-repeat="week in weeks">
            {{week | weekheader}}
        </th>
    </tr>
    <tr>
        <th>&nbsp;</th>
        <th ng-repeat="day in days">
            {{day.format("ddd")}}
        </th>
    </tr>
    <tr>
        <th>&nbsp;</th>
        <th ng-repeat="day in days">
            {{day.date()}}
        </th>
    </tr>
    <tr ng-repeat="employee in planning | filter:employeefilter">
        <td> {{employee.firstName}} {{employee.lastName}}</td>
        <td class="calendar-unit" ng-repeat="day in days" ng-init="assignments = getAssignments(day, employee)">
            <div class="assignment"
                 assignment  ng-repeat="assignment in assignments"
                 assignment-description = "{{assignment.description}}"
                 assignment-period="{{assignment.period}}"
                 assignment-type="{{assignment.type}}">

            </div>
        </td>
    </tr>
</table>

问题是getAssignments（）是“昂贵的”，因为它需要检查：

是公众假期吗？
员工当天是否工作？
员工有假期吗？
获取当天的项目作业

每当员工列表发生变化（由于过滤器）或月份发生变化时，当有40名员工时，表格的生成最多需要6秒。

有没有其他方法可以解决这个问题，或者改进ng-repeats的嵌套？

谢谢，可以澄清是否需要更多信息。

编辑：

我尝试从代码中删除一些元素以查看导致改进的原因。当我让赋值返回一个虚拟值时，渲染会提高2-3秒，因此一些缓存可能会有所帮助。但是，以这种方式呈现“空”表仍需要3-4秒。

然后我从指令本身中删除了逻辑，实际上将其变为空，这仍然导致相同的延迟。

但是，从html中删除指令本身时，表格在更改日期时几乎立即呈现。我是否必须假设这是对角度的（正常？）限制？我不想要静态数据，因为目标是拖动分配。

更新2：我意识到我一直在接近这个非常低效的......看了范围＆amp;绑定与batarang +审查代码本身，我注意到我做了太多“getAssignments（）”检查，并且我的整个方法基于“为员工分配”，而它可能是更好/更快地专注于获得一天的作业。我将在周末更新代码＆amp;如果它能改善/解决问题，则发布答案。

更新3：重写计划生成方式后，现在需要2秒钟才能显示50个资源的表格。大约有1750条指令（每天至少有一名员工参加）。我认为这是看到大小的正常延迟吗？

更新4：指令代码：

angular.module('planning.directives', ["templates.app", "ui.bootstrap", "planning.controllers"])
  .directive("assignment", function () {
    return {
        restrict: "EA",
        replace: true,
        scope: {
            assignmentData: "=",
            assignmentCreateMethod: "&"
        },
        template: '<div class="assignment">{{assignmentData.description}}&nbsp;</div>',
        link: function (scope, element, attrs) {

            element.addClass(scope.assignmentData.type);

            if (scope.assignmentData.period == "am") {
                element.css("width", "50%");
                element.css("float", "left");
            }

            if (scope.assignmentData.period == "pm") {
                element.css("width", "50%");
                element.css("float", "right");
            }

            element.on("mouseenter",function () {
                element.addClass("hover");
            }).on("mouseleave", function () {
                    element.removeClass("hover");
                });

            element.on("click", function() {
                scope.assignmentCreateMethod();
            });
        }
    };
});

Answer 1

在这种情况下，听起来你正在渲染更多可以在任何时间看到的信息。所以你可以：

通过某种分页重新考虑界面，因此您只能在任何时候呈现信息屏幕。或者可以限制您可以在任何时间显示的周数。
创建某种指令，如果它在屏幕上不可见，则删除其内容（即通过ngIf）。也许在窗口上听（去抖动）滚动事件，并从http://verge.airve.com/调用函数来测试它的任何部分是否可见。在这种情况下，排序元素的垂直大小可能很棘手，因此它稍微取决于您的用例。

为了澄清，这必须在Angular呈现之前删除内容，而不仅仅是隐藏元素。

Answer 2

嘿，“任务”是指令，对吗？也许你应该在这里粘贴指令代码。

我曾经遇到由ng-bind-html引起的渲染延迟，不知道你是否使用它。

改进嵌套的ng-repeat +指令性能

2 个答案: