来自firebase的数据未在路由更改时加载,但在刷新时进行

Question

我使用angularFire与角更新一些意见,但奇怪的是,当我从视图切换到查看数据不加载,但是当我刷新页面它.这是怎么回事？

WizardController:

/* 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这样的包装器来下载数据(它负责同步等),然后立即将数据拉出并将其放入不同的范围对象中.

只需声明你的范围var:

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