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

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

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：我意识到我一直在接近这个非常低效的……看了范围&绑定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","right");
            }

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

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