Question

我希望使用静态数据预渲染多个控制器。我的代码结构

app.js文件中的控制器（$ scope.userList = localData.users）
在单独的模板文件user_list.html中查看（ng-repeat =＆＃34; userList＆＃34中的用户;）

我的目标是在慢速设备（例如手机）上的angularJS中渲染user_list视图时避免闪烁。

Answer 1

查看ngCloak directive。

ngCloak指令用于阻止Angular html模板来自浏览器的原始（未编译）短暂显示在您的应用程序加载时表单。使用此指令可以避免由html模板显示引起的不良闪烁效果。

尝试将其放在包含div的列表中。

如果您想在实例化控制器之前解析数据，可以使用routeProvider.resolve方法，请参阅this example。

Answer 2

@Ofiris回答是正确的，所以我对它进行了投票。但它只能在Angular有机会渲染之前解决部分闪烁，即原始格式的模板闪烁。

模板实际上有3种状态：

当模板是原始和未处理时
以角度
当模板通过angular

ng-cloak解决了从1到2的转换，但它无法解决从2到3的转换，因为它不知道您的所有数据何时准备就绪。

假设您正在通过$resource或$http加载对象，并将范围对象foo设置为“Jim”。以下是您的3个州在浏览器中的显示方式。

第一个状态（预渲染）：

<div>{{foo}}</div>

第二个状态（后期渲染，而ajax在后台运行，也许是一些处理）：

<div></div>

第三状态（全部加载）：

<div>Jim</div>

所以ng-cloack非常能解决从1到2的过渡，并隐藏那个丑陋的{{foo}}，但它不会帮助你从无到有的闪烁到“吉姆”。

为此，你需要某种自己的旗帜。我写了一个指令，我将所有模板（以及ng-cloak）包装起来，称为“loading”。当所有数据都准备好处于状态3时，每个控制器都会设置$scope.ready = true;。但它非常简单，您只需要按如下方式进行换行：

<div ng-hide="!ready">
  <!-- all of your stuff here -->
  <div>{{foo}}</div>
</div>

然后您的控制器可以执行：

.controller('MyCtrl',function($scope,MyService) {
   MyService.get('/data',function(data) {
      $scope.foo = data.foo;  // or whatever else you do here
      // other processing
      $scope.ready = true; // this shows everything
   });
});

AngularJS使用静态数据预渲染（缓存）Controller View

2 个答案: