在AngularJS中加载时隐藏模板答案

【问题标题】：Hide template while loading in AngularJS在AngularJS中加载时隐藏模板
【发布时间】：2013-09-22 12:49:10
【问题描述】：

从服务器加载数据时隐藏模板的更好解决方案是什么？

我的解决方案是使用 $scope 和布尔变量 isLoading 并使用指令 ng-hide，例如：<div ng-hide='isLoading'></div>

Angular 有其他方法吗？

【问题讨论】：

我认为这个解决方案已经足够好了。

标签： javascript angularjs

【解决方案1】：

您可以尝试使用 ngCloak 指令。

查看此链接http://docs.angularjs.org/api/ng.directive:ngCloak

【讨论】：

【解决方案2】：

你这样做的方式非常好（我更喜欢使用 state='loading' 并让事情更灵活一点。）

解决这个问题的另一种方法是 promises 和 $routeProvider resolve 属性。使用它会延迟控制器的执行，直到一组指定的 Promise 被解决，例如。通过资源服务加载的数据已准备好且正确。 Gmail 中的标签以类似的方式工作，即。除非已成功从服务器获取数据，否则您不会被重定向到新视图。如果出现错误，您将停留在同一视图中或被重定向到错误页面，不是您尝试加载但失败的视图。

你可以像这样配置路由：

angular.module('app', [])
.config([

  '$routeProvider',

  function($routeProvider){
    $routeProvider.when('/test',{
      templateUrl: 'partials/test.html'
      controller: TestCtrl,
      resolve: TestCtrl.resolve
    })
  }

])

你的控制器是这样的：

TestCtrl = function ($scope, data) {
  $scope.data = data; // returned from resolve
}

TestCtrl.resolve = {
  data: function ($q, DataService){
    var d = $q.defer();

    var onOK = function(res){
      d.resolve(res);
    };

    var onError = function(res){
      d.reject()
    };

    DataService.query(onOK, onError);

    return d.promise;
  }
}

链接：

Resolve
啊啊啊！刚刚在 SO HERE 上找到了对问题的出色（但令人惊讶的相似）解释

【讨论】：

【解决方案3】：

我就是这样做的：

$scope.dodgson= DodgsonSvc.get();

在html中：

<div x-ng-show="dodgson.$resolved">We've got Dodgson here: {{dodgson}}. Nice hat</div>

<div x-ng-hide="dodgson.$resolved">Latina music (loading)</div>

【讨论】：