以编程方式将字段添加到 angularfire 并与 Firebase 同步

Question

使用 AngularJS、AngularFire 和 Firebase，作为新用户，我在使用分布式代码库时遇到了问题。我经常尝试使用 Factory() 来重用代码并遵循测试的最佳实践。但是，我无法将数据添加到我的 AngularFire 对象和 Firebase。

给定以下工厂：

angular.module('MyApp').factory("ItemData", ["$firebaseObject", "$firebaseArray", "GetFireBaseObject",
    function($firebaseObject, $firebaseArray, GetFireBaseObject) {
        var ItemsRef = GetFireBaseObject.DataURL('Items/');
        return {
            AllItems: function() {
                return $firebaseArray(ItemsRef);
            },
            OneItem: function(ItemKey) {
                var OneItemRef = ItemsRef.child(ItemKey); 
                return $firebaseObject(OneItemRef);
            }
        };
    }
]);

我可以获取我的项目，我可以使用数据等...但是，我似乎无法向对象添加元素，也无法将其添加到 Firebase。虽然屏幕会在我调用 AddQuantity/MinusQuantity 时更新数量，但我无法使用 Firebase 将此数据发送到 link 并在那里更新记录。

angular.module('MyApp').controller('InventoryCtrl', ["$scope", "StoreData", "ItemData"
    function ($scope, StoreData, ItemData) {

        $scope.StoreList = StoresData.AllStores();
        $scope.SelectedStore = {};     // Store Information
        $scope.ItemList = {};          // Store Item List

        $scope.GetItemsForStore = function() {
            // StoreDate.OneStoreItems returns list of items in this store
            var ItemData = StoreItems.OneStoreItems($scope.SelectedStore.Key);  // $firebaseArray() returned

            for( var i = 0; i < ItemData.length; ++i)
            {
                var Item = ItemData[i];

                // Item Data is master item data (description, base price, ...)
                var OneItem = ItemsData.OneItem(Item.$id);  // Get Master by Key

                Item.Description = OneItem.Description;   // From Master
                Item.UnitPrice = OneItem.UnitPrice;
                Item.Quantity = 0;
                Item.UnitTotal = 0;
            }
            $scope.ItemList = ItemData;
        };

        $scope.AddQuantity = function(item) {
            if( ! item.Quantity ) {
                item.Quantity = 0;
            }
            ++item.Quantity;
        };

        $scope.MinusQuantity = function(item) {
            if( ! item.Quantity ) {
                item.Quantity = 0;
            }
            --item.Quantity;
            if(item.Quantity <= 0) {
                item.Quantity = 0;
            }
        };
    }
]);

来自 HTML

的片段

            <pre>{{ ItemList | json}}</pre>
            <div>
                <table class="table">
                    <thead>
                        <th>Product Code</th>
                        <th>Description</th>
                        <th>Qty</th>
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                        <th>Extended</th>
                    </thead>
                    <tbody>
                        <tr ng-repeat="(Key, item) in ItemList">
                            <td>{{item.$id}}</td>
                            <td>{{item.Description}}</td>
                            <td>{{item.Quantity}}</td>
                            <td><button class="btn btn-success" ng-click="AddQuantity(item)">+</button></td>
                            <td><button class="btn btn-danger" ng-click="MinusQuantity(item)">-</button></td>
                            <td>{{item.UnitPrice | SLS_Currency}}</td>
                            <td>{{item.UnitTotal}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

我可以看到添加到元素中的 ItemList 对象的 Quantity 字段，但即使我使用按钮从 ng-repeat 传递 'item' 元素，这似乎是正确的参考，我没有看到数据同步到 Firebase。

Answer 1

我将工厂更改为服务，我相信这仍然可以通过工厂完成，但我必须添加 AngularFire 手册中的绑定功能，如图所示。代码的子集位于 select 记录下方并进行添加。

angular.module('MyApp').service("ItemData", ["$firebaseObject", "$firebaseArray", "GetFireBaseObject",
    function($firebaseObject, $firebaseArray, GetFireBaseObject) {
        var ItemRef = GetFireBaseObject.DataURL('Items/');

        this.AddItem = function(Item) {
            var OneItemRef = ItemRef.child(Item.Key);
            OneItemRef.update(Item);
            return $firebaseObject(OneItemRef);
        };

        this.DeleteItem = function(ItemKey) {
            var OneItemRef = ItemRef.child(ItemKey);
            OneItemRef.remove();
        };      

        this.GetAllItems = function() {
            return $firebaseArray(ItemRef);
        };

        this.GetOneItem = function(ItemKey) {
            var OneItemRef = ItemRef.child(ItemKey);
            return $firebaseObject(OneItemRef);
        };
    }
]);

然后控制器将不得不添加绑定，这也可能在服务中完成：

angular.module('MyApp').controller('ItemCtrl', ["$scope", "ItemData", 
    function ($scope, ItemData) {

        $scope.Items = ItemData.GetAllItems();

        $scope.EditItem = function(Item) {
            var EditItem = ItemData.GetOneItem(Item.Key);
            // Bind here for real time updates - NOTE: Changes with each key
            EditItem.$bindTo($scope, "Item").then(
                function(unbind) {
                    $scope.ItemUnbind = unbind;
                }
            );
            $scope.Item.NewField = "ABC";     // Add extra field to Firebase
        };

        $scope.SaveItem = function(Item) {
            if( ! $scope.ItemEditMode )
            {
                $scope.Item = ItemData.AddItem(Item);
            }
        };
    }
]);

尽管如此，通过此更改，任何更改（例如每次按键）都将立即同步到 Firebase 数据中。

以编程方式将字段添加到 angularfire 并与 Firebase 同步

Add fields to angularfire programatically and sync with Firebase

javascript

angularjs

firebase

angularfire

firebase-realtime-database