火力地堡约束力不反映在角视图 [英] Firebase binding not being reflected in Angular view

问题描述

我在火力地堡，picUrl（图片的URL）中的每个对象拉出一个值和存储在一个范围数组变量$ scope.bricks。我该如何使它所以$ scope.bricks更新每次火力地堡是用新的对象更新，因此新picUrl？在此先感谢！

I am pulling out one value from every object in Firebase, picUrl (the url of a picture) and storing that in a scope array variable, $scope.bricks. How do I make it so $scope.bricks updates everytime Firebase is updated with a new object, and therefore new picUrl? Thanks in advance!

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。

I should have posted how I'm using $scope.bricks in the DOM.

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

问题是，虽然firebaseObj与火力地堡同步，$（）加载只运行一次。结果
谢谢。

The issue is that while firebaseObj is synced with Firebase, $loaded() is only running once.
Thanks.

推荐答案

正如我在我的评论说，你也许可以得到它的工作：

As I said in my comment, you can probably get it working by:

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

更新：以上不工作，请参见下面OP的评论的

Update: the above doesn't work, see OP's comment below.

要了解更多关于 $ $范围适用阅读这篇文章：的 http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

To learn more about $scope.$apply read this article: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

但是，即使这可能会解决当前的问题，您以后遇到其他问题。这样做的原因是，你正在创建砖的非受​​管阵列。 AngularFire有相当长的一段code，以确保火力地堡的订单收藏和AngularJS的双向数据绑定阵列发挥好在一起。

But even though this may fix your current issue, you'll run into other problems later. The reason for this is that you're creating an "unmanaged array" of bricks. AngularFire has quite some code to ensure that Firebase's order collections and AngularJS's two-way data-bound arrays play nice together.

有关这个原因，它可能是更好，如果你设置了你的产品阵列的一个独立的同步：

For this reason it is probably better if you set up a separate sync for your array of products:

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将调用 $适用（） automaticaly当阵列项目最初加载或之后被修改。

With this setup, AngularFire will call $apply() automaticaly when the array items initially load or are modified afterwards.

这篇关于火力地堡约束力不反映在角视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！