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

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（）是“昂贵的”，因为它需要检查：

1. 是公共假期吗？
2. 员工在那天工作吗？
3. 员工有假期吗？
4. 获取当天的项目任务

每当更改员工列表（由于过滤器）或更改月份时，拥有约40名员工时，表的生成最多需要6秒钟。

还有另一种方法可以解决这个问题，或者改善ng-repeats的嵌套吗？

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

编辑：

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

然后，我从指令本身中删除了逻辑，有效地使其变为空，这仍然导致相同的延迟。

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

更新2： 我意识到我一直效率很低…在使用batarang查看范围和绑定+回顾了代码本身之后，我注意到我做的“
getAssignments（）”检查太多了，而我的整个方法都是基于“为员工分配工作”，而专注于一天的工作可能会更好/更快。我将在周末更新代码并发布答案（如果它可以改善/解决问题）。

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

更新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渲染之前删除，而不仅仅是隐藏元素。