以编程方式将字段添加到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链接并更新那里的记录。

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对象，但即使我从纳克重复传递“项目”元素与按钮，这似乎是适当的参考，我没有看到数据同步到Firebase。

Answer 1

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

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数据中。