2

Использование AngularJS, AngularFire и Firebase, как новый пользователь, у меня возникают проблемы с распределенной базой кода. Я пытаюсь использовать Factory() часто для повторного использования кода и использования лучших методов тестирования. Однако у меня возникают проблемы с добавлением данных в мой объект AngularFire и Firebase.Добавить поля в 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.

+0

Вы загружаете свой '$ firebaseObject в' OneItem', но затем изменяете поля в 'Item'. 'var OneItem = ItemData.OneItem (Item. $ id);' vs 'Item.Description = OneItem.Description;'. Измените свойства на 'OneItem', а затем вызовите' $ save() 'на нем. –

+0

@FrankvanPuffelen Я обновил код комментариями, чтобы лучше объяснить, что я пытаюсь сделать. Данные нормализуются, и каждый магазин может иметь различный поднабор информации из главного списка элементов. Вызов OneItem предназначен для элемента «Мастер», поэтому я могу получить описание, цену и т. Д. Из него, для моего рабочего списка, который я хочу обновить. Я не хочу изменять главный элемент, но элемент магазина. –

+1

Проблема остается такой же, насколько я вижу: вам нужно вызвать '$ save' в' $ firebaseObject' где-нибудь, чтобы сохранить ваши изменения. Если это не так, можете ли вы настроить jsfiddle/jsbin, который воспроизводит проблему? –

ответ

2

Я изменил завод, чтобы быть сервисом, и я считаю, что это все равно можно было бы сделать через завод, но мне пришлось добавить функциональность связывания из руководства 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.

 Смежные вопросы

  • Нет связанных вопросов^_^