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">。

我的想法是在访问应用程序之前加载应用程序，然后从API中获取rows，而不是将其传递给此模板进行渲染。

将rows和rendered template保存到本地存储。在我需要的其他控制器中，我可以从本地存储恢复行并从本地存储注入模板。

我不确定如何在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);

在小提琴中尝试，我已在评论中提供。

P.S。不要忘记每次都更新LS中的模板，更改内容。

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

1 个答案: