AngularJS：存储/加载html +指令

Question

我有一个有两条路线的单页应用。每个路由从后端加载大量角度指令的html代码。加载html后，我必须编译指令，以便AngularJS允许使用它们。但是数量太大以至于this解决方案挂起浏览器一分钟，所以我使用promises顺序编译指令：

var functions = [];
angular.forEach(angular.element("ang-accordion"), function (value, key) {
         functions.push(function () {
               var taskDeferred = $q.defer();
               $compile(value)($scope);
               $timeout(function () {
                      taskDeferred.resolve();
               }, 1);
               return taskDeferred.promise;
         });
});

function serial(tasks) {
        var prevPromise;
        angular.forEach(tasks, function (task) {
            //First task
            if (!prevPromise) {
                prevPromise = task();
            } else {
                prevPromise = prevPromise.then(task);
            }
        });
        return prevPromise;
    }
serial(functions);

此解决方案使加载速度稍慢，但没有浏览器挂起。现在我想将这个带有指令的html存储在服务中，并在再次调用路由时加载它。但我遇到了一个问题，如果我从服务加载html +指令并将其绑定（使用ng-bing-html）到容器，我必须再次编译它。有没有办法存储/缓存和加载html + ng而无需再次重新编译所有内容？或者可能更快，更漂亮的方法来实现范围的指令？