Question

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

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

Answer 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....
    }
}

缓存AngularJS指令的编译模板

1 个答案: