angularjs - Firebase 绑定(bind)未反射(reflect)在 Angular View 中

Question

我从 Firebase 中的每个对象 picUrl(图片的 URL)中提取一个值，并将其存储在作用域数组变量 $scope.bricks 中。如何使 $scope.bricks 每次使用新对象更新 Firebase 时更新，从而更新新的 picUrl？提前致谢!

angular.module('noorApp').controller('MainCtrl', function ($scope, $http, $firebase) {
    var sync = $firebase(ref);
    var firebaseObj = sync.$asObject();
    $scope.bricks = [];

    firebaseObj.$loaded().then(function(){
        angular.forEach(firebaseObj.products, function(value, key){
            $scope.bricks.push({src: value.picUrl});
        });
    });
});

编辑:

我应该发布我如何在 DOM 中使用 $scope.bricks 。

<div class="masonry-brick" ng-repeat="brick in bricks">
  <img ng-src="{{ brick.src }}">
</div>

问题是，虽然 firebaseObj 与 Firebase 同步，但 $loaded() 仅运行一次。
谢谢。

Answer 1

正如我在评论中所说，您可能可以通过以下方式使其正常工作:

    firebaseObj.$loaded().then(function(){
        angular.forEach(firebaseObj.products, function(value, key){
            $scope.bricks.push({src: value.picUrl});
            $scopy.$apply();
        });
    });

更新:上面的方法不起作用，请参阅下面OP的评论。

要了解有关 $scope.$apply 的更多信息，请阅读本文:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

但是，即使这可能会解决您当前的问题，但稍后您还会遇到其他问题。原因是您正在创建一个“非托管数组”。 AngularFire 有相当多的代码来确保 Firebase 的订单集合和 AngularJS 的双向数据绑定(bind)数组能够很好地协同工作。

出于这个原因，如果您为您的一系列产品设置单独的同步可能会更好:

angular.module('noorApp').controller('MainCtrl', function ($scope, $http, $firebase) {
    var sync = $firebase(ref);
    var firebaseObj = sync.$asObject();
    $scope.bricks = $firebase(ref.child('products')).$asArray();    
});

通过此设置，AngularFire 将在数组项最初加载或随后修改时自动调用 $apply()。