Question

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

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

角度有另一种方法吗？

Answer 1

您可以尝试使用ngCloak指令。

结帐此链接http://docs.angularjs.org/api/ng.directive:ngCloak

Answer 2

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

解决此问题的另一种方法是承诺和$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
AAA！刚刚在SO HERE

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

在AngularJS中加载时隐藏模板

3 个答案:

您可以配置如下路由：

你的控制器是这样的：

链接：