Question

我是AngularJS的新手，如果这个问题太明显，请道歉：

我正在开发一个AngularJS应用程序，它从Firebase获取数据（作为jSON）。

JSON的片段：

{
  "-JEwtuuyDQzKxGAcOB-L" : {
    "date" : 1391517477,
    "filter" : "video",
    "type" : "instagram",
    "url" : "http://instagram.com/example",
    "title" : "#textile #materials #test This is a test",
    "author" : "teknotica",
    "image" : "http://image.jpg"
  }
}

数据绑定到DOM并打印，一切正常。我现在的目标是在数据全部绑定到DOM时添加一个隐藏的加载器。

我的问题是：我在哪里或如何检查该状态？我怎么知道所有数据都印在前端？

我的代码片段：

angular.module("appFeed", ["firebase"])
  .factory("appService", ["$firebase", function($firebase) {


    var ref = new Firebase("my_app_url"); 
        ref.on('value', function(snapshot) {        
        // Thought this was the place where I could check data is ready
    });

    return $firebase(ref);

  }])
  .controller("AppController", ["$scope", "appService",
    function($scope, appService) {

      $scope.feed_items = appService;

    }    
  ]);

提前多多感谢！

Answer 1

你可以这样做。在HTML中创建div以显示加载文本或图像，只需使用ngShow / ngHide指令隐藏/显示它。

<强> HTML

<div ng-show="showLoading">Loading...</div>
<div ng-hide="showLoading">Your data will be here</div>

<强>控制器

angular.module("appFeed", ["firebase"])
  .factory("appService", ["$firebase", function($firebase) {


    var ref = new Firebase("my_app_url"); 
        ref.on('value', function(snapshot) {        


    });

    return $firebase(ref);

  }])
  .controller("AppController", ["$scope", "appService",
    function($scope, appService) {
      var appHandle = appService;

      appHandle.then(function(data) {
           $scope.feed_items = data;
           $scope.showLoading = false;
      });

      $scope.showLoading = true;

    }    
  ]);

Answer 2

找到解决方案，执行以下操作：

.controller("AppController", ["$scope", "appService", "$firebase",
    function($scope, appService, $firebase) {

      var ref = new Firebase("my_app_url");

      $scope.asset = $firebase(ref);
      $scope.asset.$on('loaded', function(items) {
              // Items has been loaded!
      });
});

如何检查数据是否绑定到AngularJS中的DOM？

2 个答案: