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的双向数据绑定数组能够很好地协同工作。

因此，为您的产品阵列设置单独的同步可能会更好：

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()。

Answer 2

在阅读了弗兰克的回答之后，我意识到我的问题出在我的HTML上。当我不需要时，我试图从同步变量中创建一个新变量。我可以直接引用同步变量。

我应该修改我的ng-repeat变量而不是我的模型。 firebaseObj与Firebase同步，所以我们把它放在$ scope。

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

现在在DOM中，我应该引用firebaseObj：

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

或者弗兰克说，我们可以从Firebase中提取产品文档：

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

在这种情况下，html看起来像这样：

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

关键是通过直接引用同步变量，我不需要$ loaded（）来运行！

谢谢弗兰克。

Firebase绑定未在Angular视图中反映出来

2 个答案: