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

Question

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

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

如果您仍在关注，则有一个外部 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 和所有附带的 ngInclude 和观察者。他们只是还不可见。单击列表中的租户只会更改 div 的高度，从而显示内部菜单。

这个 UI 的设计方式对性能的影响绝对是可怕的。页面上有超过 15,000 名观察者可以查看您甚至看不到的元素。对一个租户采取行动会无缘无故地触发所有租户的摘要循环。检索必要的数据需要不到一秒的时间，但呈现 60 名申请人的列表几乎需要 20 秒。我已经完全删除了该指令（这意味着当您单击租户时不会发生任何事情）并且加载和渲染时间从 20 秒变为 2-3 秒。

我不确定如何实现这一点，但是否可以推迟附加此指令直到租户被点击？我不想单击租户 div 来更改高度并显示里面的内容，我想立即附加整个指令然后扩展高度。理想情况下，当再次触发 click 事件并且租户崩溃时，我还可以销毁任何观察者并自行清理。

哇。

编辑：臭名昭著的滑动指令粘贴在下面。我认为里面绑定了一个点击事件很奇怪，但也许这是一个好的。 Angular 中的代码模式。我有一种预感，我可以利用 compile、postlink 和 prelink 函数以及接受的答案。我认为我继承了一些遗留代码。

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));
};

当然，您也希望在元素折叠时清除它们，但听起来您对性能考虑因素有很好的把握。