缓存 AngularJS 指令的编译模板

Posted 2023-02-22

【中文标题】缓存 AngularJS 指令的编译模板

【英文标题】：Cache compiled template of an AngularJS directive

【发布时间】：2015-02-15 18:28:09

【问题描述】：

我有一个带有许多 ngRepeat 模板的指令，需要一些时间来渲染，我可以接受。但问题是我在同一个视图中多次调用此指令。因此，由于指令的每个实例都会发生 ngRepeat，因此会导致很多冻结和性能问题。

指令的每个实例的模板都是相同的，所以如果我只能在第一次编译它，缓存已编译的 html 并将其用于另一个指令实例，那就太好了。

【参考方案1】：

这是我的解决方案，它很脏，但运行良好。

我所做的是在指令函数中与 XMLHttpRequest 同步加载模板，然后在指令的控制器中只编译一次。

.directive('myDirective', function($compile) 
     var cachedTemplate = null,
         templateCompiled = false;

    var xhr = new XMLHttpRequest();

    // do an asynchronous request to wait until we load the template
    xhr.open('GET', 'directives/template.html', false);
    xhr.send(null);

    if (xhr.status == 200) 
        cachedTemplate = xhr.responseText;
    

    return 
        restrict: 'E'
        scope: 
        date: 'someData'
    

    controller: function($scope, $element, $attrs) 
        if (!templateCompiled) 
          // compile the template only one time.
            cachedTemplate = $compile(cachedTemplate)($scope);
            templateCompiled = true
        

        // replace/include the compiled template in our $element
        $element.replaceWith(cachedTemplate);
        // ... do the job....
    

【讨论】：

这里有一个竞争条件，Ajax 调用可能不会在控制器函数被调用之前及时返回。编辑：没关系，我注意到您进行了同步调用 - 它解决了竞争条件但会导致您的浏览器冻结。