来自firebase的数据不会在路由更改时加载，但会在刷新时加载

Question

我正在使用 angularFire 和 Angular 来更新一些视图，但奇怪的是当我从视图切换到视图时数据不会加载，但当我刷新页面时它会加载。怎么回事？

向导控制器：

/* initialize data */

var ref = new Firebase('https://dlwj.firebaseio.com/');

/* set data to automatically update on change */

$scope.currentLocation = $route.current.$$route.originalPath;
$scope.propertyRef = $firebase(ref);

$scope.propertyRef.$on('loaded', function(value) {

  //value will be undefined when I switch views using hash routes.
  //there is no issue when I just refresh on that page.
  console.log(value); 
  $scope.propertyConfiguration = value.products;
  var products = [];
  for (var key in value.products) {
    if (value.products.hasOwnProperty(key)) {
      products.push(key);
    }
  }

  $scope.productsArray = products;

});

console.log('Data retrieved');

路线：

$routeProvider.when('/SharedProperties',
{
  templateUrl: 'partials/SharedPropertiesPartial.html',
  controller: 'WizardController'
});

$routeProvider.when('/Registration',
{
  templateUrl: 'partials/Registration.html',
  controller: 'WizardController'
});

$routeProvider.when('/Login',
{
  templateUrl: 'partials/Login.html',
  controller: 'WizardController'
});

Answer 1

没有理由使用 $firebase 之类的包装器库（负责同步等）下载数据，然后立即将这些数据拉出并放入不同的范围对象中。

只需声明你的作用域变量：

$scope.products = $firebase(ref);

并使用它：

<ul>
   <li ng-repeat="product in products | orderByPriority">{{product|json}}</li>
</ul>

如果您需要在控制器或服务中迭代数据：

$scope.products = $firebase(ref);

// some time later, probably in $scope.products.$on('loaded')...
// note that $getIndex() is only useful here to get the keys in
// the order they appear in the database, otherwise, forEach($scope.products, ...)
// is sufficient
angular.forEach($scope.products.$getIndex(), function(key) {
   console.log(key, $scope.products[key]);
});

如果您想将 Firebase 用作静态数据库（这对于像我这样的所有实时事物的爱好者来说非常令人困惑）并且每次发生更改时都不会收到通知，您可以简单地执行以下操作：

angular.controller('MyController', function($timeout, $scope) {
   new Firebase('<URL>').once('value', function(snap) {
      $timeout(function() {
         $scope.products = snap.val();
      });
   });
});

然后正常使用：

<ul>
   <li ng-repeat="(key,product) in products">{{key}}: {{product|json}}</li>
</ul>