javascript - AngularJS 1.x 缓存编译链接函数

Question

关于 AngularJS 1.x 中的指令，我想知道是否有人看到从 $compile 服务返回的缓存链接函数有任何问题。例如...

myDirectiveModule.directive('myDirective',...
    return {
        ....
    compile:function(tElement) {
        return function($scope, $element, $attr) {
            var templateUrl='/path/to/myDirective.tpl.html';
            //link function cache would store link functions keyed on templateUrl
            //for example: cache[templateUrl] = $compile(html);
            $linkFunctionCache({
                 templateUrl:templateUrl
            }).then(function(linkFunction) {
                linkFunction($scope,function(clonedElement) {
                    $element.append(clonedElement);
                })
            });
        }

    }
....

我可以看到可能需要在页面上多次编译的非常精细的指令的性能改进

概念证明... https://codepen.io/anon/pen/ZLENVV

Answer 1

考虑到链接函数被分配为 link = $compile('<directive>')多次调用它与调用 $compile 不同。多次。指令生命周期就会以这种方式被破坏。

所有这些link链接函数的作用是将编译的指令绑定(bind)到提供的范围。在 cloneAttachFn 的帮助下参数可以创建 DOM 树的克隆，但仅此而已。

在上面的例子中controllerA == controllerB检查是错误的。 controllerB那里未定义，因为 Controller 构造函数只运行一次。 element1.controller() === element2.controller() .

如果单个指令的生命周期适合这种情况，则可以通过这种方式优化单个指令的性能(考虑到性能确实得到了改善；这还应该通过基准测试进行测试)。但更干净的高性能方法是使用 jQuery 或 vanilla JS 在链接后函数中构造指令模板。

由于此方法会阻止正常的指令生命周期，因此它与任意指令不兼容(不包括可能出现的内存泄漏问题)。