2016-05-09 6 views
3

私はこれらの機能を1つのコントローラに持っています。データを正常にインポートしましたが、$add,$remove$editは使用できません。私は$RootScopeを使用します。保存されるアイテムは異なる状態にあり、コントローラが異なるためです。私はこれで新しいので、本当に助けに感謝します。AngularJSからFirebaseにアレイの新しいオブジェクトを追加、削除、編集する方法

angular 
    .module("") 
    .factory("Factory",function($http,$firebaseArray){ 

     var ref = new Firebase('https://****.firebaseio.com/'); 

       return{ 
       ref:$firebaseArray(ref) 
     } 
    }); 

      $scope.saveItems = function() { 
      console.log($scope.item); 
      $rootScope.items.push($scope.item); 

      $scope.item = []; 
      $mdSidenav('right').close(); 
     } 

     $rootScope.removeItems = function(item) { 
     var index = $rootScope.items.indexOf(item); 
     $rootScope.items.splice(index, 1);  
     }; 

      $rootScope.editItems=function(item){ 
      $rootScope.editing = true; 
      $mdSidenav('right').open(); 
      $rootScope.item=item; 

      $rootScope.saveEdit=function(){ 
       $rootScope.editing=false; 

       $mdSidenav('right').close(); 
      }; 
     }; 

答えて

3

Firebaseの配列は、ややこしいことがあります。 Firebaseのブログのa good postが詳細に少し入っています。しかし、理解しなければならない最大のことは、配列が実際にオブジェクトとして格納されていることです(インデックスではアクセスが難しくなります)。同時に複数のクライアントが配列を更新して予期しない結果を招く可能性があります。

あなたのケースでは、あなたのアプリケーションを通過しているもののデータフローについて考えるのが役に立ちます。 $ firebaseArrayの美しさは、その配列がFirebaseで更新されると、変更がすべての接続されたクライアントにブロードキャストされることです。

あなたのアプリケーションでは、$ rootScopeで何かを更新してビューに反映させるのではなく、Firebaseのデータを更新して$ firebaseArrayに変更をブロードキャストさせる方が理にかなっています。 Firebase配列で提供されているメソッドを使用すると、実際にビューで直接行うことができます(下記のHTMLセクションを参照)。

// JavaScript 
var app = angular.module("ItemApp", ["firebase"]); 

app.controller("ItemCtrl", function($scope, $firebaseArray) { 
    var itemsRef = new Firebase("https://xxxx.firebaseio.com/items"); 
    $scope.items = $firebaseArray(itemsRef); 
    } 
]); 

とビューで:

//HTML example with remove only, can apply to add or edit 
<ul> 
    <li ng-repeat="item in items"> 
    {{ item.property }} 
    <button ng-click="items.$remove(item)">x</button> 
    </li> 
</ul> 

ここに大きな変化は、クライアント側でデータを更新し、その後Firebaseにそれをバック同期しようとしているではないと思いますし、ではなく、更新することですデータをFirebaseに追加し、$ firebaseArrayをクライアントへの変更を同期させます。

docs on synchronized arraysは、上記で概説した基本的なCRUD操作について非常に詳細です。

関連する問題