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

Question

如何在从服务器加载数据时隐藏模板呢？

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

除此之外，Angular有其他的解决方案吗？

- Kirill Ryabin

---

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

Answer 1

你可以尝试使用ngCloak指令。

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

- Harshad

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

链接:

• 解析
• 哇！在stackoverflow上发现了一个非常好的（但令人惊讶地相似）关于这个问题的解释在这里

- Rafal Pastuszak

Answer 3

这是我的做法：

$scope.dodgson= DodgsonSvc.get();

在html中:

我们有Dodgson在这里:{{dodgson}}。漂亮的帽子

拉丁音乐（正在加载）

- Amaury D