2016-09-22 19 views
1

firebaseとangularjsを初めて使用しました。私のセールスアプリケーションでは、両方を使いたいです。だから私のアプリで私は使用していますAngularJS v1.5.8 + Firebase v3.3.0 + AngularFire 2.0.2。私は、firebaseデータベースにsalesオブジェクトとusersオブジェクトを持ち、1人のユーザーが複数の製品を販売できるビジネスロジックを持っていますが、1つの製品は1人の所有者(ユーザー)しか持てません。ここで

ユーザー販売データベース内オブジェクトです:私は何をしたいか

{ 
    "sales" : { 
    "-KQlb5N6A9rclc5qcWGD" : { 
     "price" : 8, 
     "quantity" : { 
     "count" : 12, 
     "type" : "porsiyon" 
     }, 
     "status" : "sale", 
     "title" : "Patlicanli Borek", 
     "user" : "-KQ52OJd-lwoDIWzfYFT" 
    }, 
    "-KQlcScsq8cidk7Drs04" : { 
     "price" : 12, 
     "quantity" : { 
     "count" : 10, 
     "type" : "porsiyon" 
     }, 
     "status" : "sale", 
     "title" : "Deneme", 
     "user" : "-KQ5-mZBt6MhYy401gGM" 
    }, 
    "-KQzXHwOv2rC73scjV46" : { 
     "price" : 12, 
     "quantity" : { 
     "count" : 11, 
     "type" : "porsiyon" 
     }, 
     "status" : "sale", 
     "title" : "Pacanga", 
     "user" : "-KQ5-mZBt6MhYy401gGM" 
    }, 
    "-KSCBgpArtnKunUuEuVr" : { 
     "price" : 15, 
     "quantity" : { 
     "count" : 15, 
     "type" : "porsiyon" 
     }, 
     "status" : "sale", 
     "title" : "Iskembe", 
     "user" : "-KQ52OJd-lwoDIWzfYFT" 
    } 
    }, 
    "users" : { 
    "-KQ5-mZBt6MhYy401gGM" : { 
     "address" : "Halkali kucukcekmece", 
     "email" : "[email protected]", 
     "name" : "Burak Hero", 
     "nick" : "Burak'in Mutfagi" 
    }, 
    "-KQ52OJd-lwoDIWzfYFT" : { 
     "address" : "Izmir kaynaklar", 
     "email" : "[email protected]", 
     "name" : "Ayse Kahraman", 
     "nick" : "Ayse'nin Mutfagi" 
    } 
    } 
} 

私のアプリが開かれたとき、それは、対応するユーザの詳細と一緒にすべての販売が表示されますです。 (ちょうどletgoアプリケーションのメインページと同じです)つまり、私はsalesオブジェクトとusersオブジェクトの間の単純な結合を実装する必要があります。私がインターネットとapiのドキュメントで検索した限りでは、firebaseへの一回の呼び出しでこの種の結合を実装する方法はありません。 (私が間違っている場合は私に正しい)私は$を使用して、以下の方法を使用しての内部で機能を読み込み、結合を実装しました。

angular. 
    module('core.sales') 
    .service('SalesService', function ($firebaseArray, $firebaseObject, UsersService) { 
this.getAllSalesJoin = function() { 
     var sales; 
     var refSales = firebase.database().ref('sales'); 
     sales = $firebaseObject(refSales); 
     sales.$loaded() 
     .then(function() { 
      angular.forEach(sales, function (sale) { 
      var saleUser = UsersService.getUserDetail(sale.user); 
      saleUser.$loaded() 
       .then(function() { 
       sale.user = saleUser; 
       }); 
      }); 
     }); 
     return sales; 
    }; 
}); 

あなたはそれが終了した後、私はこれまでのところは良い

angular. 
    module('core.users') 
    .service('UsersService', function ($firebaseArray,$firebaseObject) { 
this.getUserDetail = function (userId) { 
     var user; 
     var refUser = firebase.database().ref('users/'+userId); 
     user = $firebaseObject(refUser); 
     return user; 
    }; 
    }); 

の下に示された別のUsersServiceを呼び出すことにより、セットに関連するユーザーの詳細を取得し、各販売のためにループ、すべての販売を取得しています見ての通り私がコントローラの中で SalesService.getAllSalesJoinを関数と呼び、<pre>{{$ctrl.allSales | json}}</pre>を使用してJSONオブジェクトを印刷すると、すべてがうまくいきます。コントローラコードとJSONオブジェクトがテンプレートに表示されます。

angular. 
    module('saleList'). 
    component('saleList', { 
    templateUrl: 'MCTs/sale-list/sale-list-template.html', 
    controller: ['SalesService','UsersService', function SaleListController(SalesService,UsersService,$scope) { 

      this.allSales = SalesService.getAllSalesJoin(); 
}] 
    }); 

テンプレートがマージされたオブジェクトサーバのデータは、(新しい販売が入力されているか、古いものは削除される)に変更され

{ 
    "$id": "sales", 
    "$priority": null, 
    "-KQlb5N6A9rclc5qcWGD": { 
    "price": 8, 
    "quantity": { 
     "count": 12, 
     "type": "porsiyon" 
    }, 
    "status": "sale", 
    "title": "Patlicanli Borek", 
    "user": { 
     "$id": "-KQ52OJd-lwoDIWzfYFT", 
     "$priority": null, 
     "address": "Izmir kaynaklar", 
     "email": "[email protected]", 
     "name": "Ayse Kahraman", 
     "nick": "Ayse'nin Mutfagi" 
    } 
    }, 
    "-KQlcScsq8cidk7Drs04": { 
    "price": 12, 
    "quantity": { 
     "count": 10, 
     "type": "porsiyon" 
    }, 
    "status": "sale", 
    "title": "Deneme", 
    "user": { 
     "$id": "-KQ5-mZBt6MhYy401gGM", 
     "$priority": null, 
     "address": "Halkali kucukcekmece", 
     "email": "[email protected]", 
     "name": "Burak Hero", 
     "nick": "Burak'in Mutfagi" 
    } 
    }, 
..... 

しかしがある 問題を示し、角度が自動的に変更を理解し、それ結合された関数を実装または呼び出すことなくビューに変更を適用すると、という販売オブジェクトのみがユーザーとマージされたものではなく、単純に印刷されます。以下は、サーバのデータを変更した後の表示オブジェクトです。

{ 
    "$id": "sales", 
    "$priority": null, 
    "-KQlb5N6A9rclc5qcWGD": { 
    "price": 8, 
    "quantity": { 
     "count": 12, 
     "type": "porsiyon" 
    }, 
    "status": "sale", 
    "title": "Patlicanli Borek", 
    "user": "-KQ52OJd-lwoDIWzfYFT" 
    }, 
    "-KQlcScsq8cidk7Drs04": { 
    "price": 12, 
    "quantity": { 
     "count": 10, 
     "type": "porsiyon" 
    }, 
    "status": "sale", 
    "title": "Deneme", 
    "user": "-KQ5-mZBt6MhYy401gGM" 
    }, 
.... 

なぜそのように動作するのですか? $を使用して参加を実装する私の方法は間違っている?または、私はこの種の結合を実装する別の方法を使用する必要がありますか?私はあなたの貴重な提案やアイデアを楽しみにしています。

答えて

関連する問題