带有静态数据的 AngularJS 预渲染(缓存)控制器视图

Question

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

• 应用程序中的控制器.js文件 （$scope.userList = localData.users）
• 在单独的模板文件中查看 user_list.html （ng-repeat="用户列表中的用户"）

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

Answer 1

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

模板实际上有 3 种状态：

1. 当模板为原始且未处理时
2. 当模板通过角度处理时
3. 当模板通过角度加载其数据时

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），叫做"加载"。每个控制器设置$scope.ready = true;当所有数据都准备好进入状态 3 时。但这很简单，你只需要按如下方式包装：

<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
   });
});

Answer 2

查看 ngCloak 指令。

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

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

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