6

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

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

角有另一种方法吗？

4

3 回答 3

9

您可以尝试使用 ngCloak 指令。

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

于 2013-09-22T12:53:20.777 回答
6

你这样做的方式非常好（我更喜欢使用 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;
  }
}

链接：

于 2013-09-22T13:12:18.067 回答
1

我就是这样做的：

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

于 2014-03-12T17:28:15.037 回答