我有一个横向月历,显示每天员工的活动.
目前它正在使用具有以下层次结构/流的表
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> </th> <th ng-repeat="day in days"> {{day.format("ddd")}} </th> </tr> <tr> <th> </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}} </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(); }); } }; });