Question

在我们的租赁应用程序中，我们进行填充数组的API调用，从而触发ngRepeat。这将创建一个div列表，显示有关出租物业的基本信息。

单击某个属性会展开div，然后进行另一个 API调用，以使用租户列表填充内部ngRepeat。其中一些属性列出了多达100个租户（包括过去和现在）。租户divs本身也是可扩展的，这揭示了大部分功能。您可以下载租赁协议，查看历史记录等。所有这些功能都是由许多ng-includes组成的单一指令。

如果您仍在关注，那么外部的ngRepeat和内部的ngRepeat内部都有一个巨大的指令。

<div ng-repeat="properties in property_collection track by property.ID>
    *code removed*
    <div ng-repeat="tenant in property_tenant_collection track by tenant.ID>
    *...code here...*
    <div tenant-menu></div>

当您展开属性列表时，将呈现指令tenant-menu以及随附的所有ngIncludes和观察者。他们还没有看到。单击列表中的租户只会更改div的高度，从而显示内部菜单。

此UI设计方式的性能影响绝对可怕。页面上有超过15,000名观察者，您甚至无法看到这些元素。对一个租户采取行动无缘无故地为所有这些人开启消化循环。检索必要的数据需要不到一秒钟，但需要大约20秒来呈现60个申请人的清单。我完全删除了指令（这意味着当你点击租户时没有任何反应）和loading＆amp;渲染时间从20秒到2-3秒。

我不确定如何实现这一点，但是可以推迟附加此指令，直到单击租户为止？我不想点击租户div只是改变高度并显示内部的内容，我想要追加整个指令然后然后扩展高度。理想情况下，当再次触发click事件并且租户崩溃时，我也可以销毁任何观察者并在我自己之后进行清理。

呼。

编辑：臭名昭着的滑动指令粘贴在下面。我觉得奇怪的是一个click事件被绑定在里面，但也许这是一个O.K. Angular中的代码模式。我有一种预感，我可以利用编译，后链接和预链接功能以及接受的答案。我认为我继承了一些遗留代码。

angular.module('jnjManagement.directives').directive('slideableTenant', function($compile, tenantService) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var targetX, contentX;

        attrs.expanded = false;
        element.bind('click', function() {
            if (!targetX) targetX = document.querySelector(attrs.slideToggleTenant);
            if (!contentX) contentX = targetX.querySelector('.slideable_tenant_content');
            if (!attrs.expanded) {
                contentX.style.border = '1px solid rgba(0,0,0,0)';
                var y = contentX.clientHeight;
                contentX.style.border = 0;
                targetX.style.height = 'auto';
            } else {
                targetX.style.height = '0px';
            }
            attrs.expanded = !attrs.expanded;
        });
    }
};
});

Answer 1

理想情况下，您将拥有属性指令和租户指令，并且您确实只会在单击时加载展开元素的内容。我会使用Angular的$ compile。

$scope.clickHandler = function(){
    $('expanded-element').append($compile('<detail-directive></detail-directive')($scope));
};

当然，您也希望在折叠时清除元素，但听起来您已经很好地掌握了性能方面的考虑。

如何利用AngularJS指令的功能将呈现内容推迟到单击事件之前？

1 个答案: