javascript - Angular渲染模板并将其存储到本地

Question

我有一个模板(部分)，我在应用程序的几个部分中使用它，问题是渲染此模板需要 1-3 秒。我尽可能地优化了渲染过程，但仍然有点慢。

我的模板:

<div ng-repeat="row in rows track by $index">
  <div ng-repeat="col in row track by $index">
    <div class="column" ng-click="checkColumn($parent.$index, $index, col)">
      <img ng-src="..." ng-if="col.checked" />
      <img ng-src="..." ng-if="col.reserved" />
      <img ng-src="..." ng-if="col.used" />
      <img ng-src="..." ng-if="col.locked" />

      <img ng-src="..." ng-if="col.private" />
      <img ng-src="..." ng-if="col.disabled" />
      <img ng-src="..." ng-if="col.large" />
      <img ng-src="..." ng-if="col.small" />
    </div>
  </div>
</div>

平均有 15 rows每个 row通常有平均。 17 cols 。所以通常大约是 255 <div class="column">被创建。

我的想法是，在访问显示此内容的屏幕之前加载应用程序时获取 rows从 API 将它们传递给此模板以使其呈现。

比保存rows和rendered template到本地存储。与我需要的其他 Controller 相比，我可以从本地存储恢复行并从本地存储注入(inject)模板。

只是不确定我将如何在 AngularJS 方面解决这个问题。

Answer 1

一般来说 - 您可以在 LS 中自由地将模板存储为静态 HTML，并且不用担心任何 Angular ng-click等等。由于您的所有数据都将被视为静态 HTML，因此任何 Angular 属性都将被编译并运行。

我已经举例说明了如何通过模板执行此操作，希望它能为您提供答案。

HTML:

<div ng-app="app" id="app">
<cached-directive></cached-directive>
</div>

JS:

var app = angular.module('app', []);
var data = [{a: 1}, {a: 2}, {a: 3}];

var cachedDirective = function ($compile) {
	var directiveCtrl = function () {
  	this.somevar = Date.now();
  }
  
  directiveCtrl.prototype.sayHi = function () {
  	alert(1);
  }
	
  var originTemplate_ = '<b>{{ctrl.somevar}} TEST </b><button ng-click="ctrl.sayHi()">HELLO</button>';
  
  return {
		template: localStorage.template || originTemplate_,
    controller: directiveCtrl,
    controllerAs: 'ctrl',
    link: function (scope, el, attrs) {
     setTimeout(function () {  
        localStorage.template = el.html();
     })
    }
  };
}

app.directive('cachedDirective', cachedDirective);

在 fiddle 上尝试一下，我在评论中提供了。

P.S.每次发生变化时，不要忘记更新 LS 中的模板。