角度渲染模板并将其存储到本地

Angular render template and store it to local

本文关键字：存储      更新时间：2023-09-26

我有一个模板（部分），我在应用程序问题的几个部分使用，渲染这个模板需要 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">被创建。

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

而不是将rows和rendered template保存到本地存储。与我需要这个的其余控制器相比，我可以从本地存储恢复行并从本地存储注入模板。

只是不确定我将如何在 AngularJS 方面做到这一点。

一般来说 - 您可以在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);

在

小提琴上尝试一下，我已经在评论中提供了。

附言不要忘记每次在LS中更新您的模板，有些东西发生了变化。

相关文章：