在AngularJS中加载时隐藏模板

Question

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

我的解决方案是使用$scope布尔变量isLoading和using指令ng-hide,ex:<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;
  }
}

链接:

• 解决
• Aaa级!刚刚在SO HERE找到了一个很好的(但令人惊讶的相似)解决问题的方法