Angular.jsで同じタイプのコンポーネント間でデータを共有する1

Question

私は現在、同じタイプの3つのコンポーネントを持っています。たとえば、「Lister」というコンポーネントがあり、別のAPIを呼び出す3つのリスターコンポーネントがあります（教師、学生、コースのリストなど）。しかし、コースをロードするコンポーネントが、教師をレンダリングするコンポーネントのデータにアクセスする場合、この場合、私は何をすべきですか？私はいくつかの方法を見てきましたが、コンポーネント間で情報を（$ scopeと$ rootScopeを介して）他のタイプと共有することに関連しています。

<lister data-ng-cloak api="/teacher" type="teacher"></lister> 
    <lister data-ng-cloak api="/student" type="student"></lister> 
    <lister data-ng-cloak api="/course" type="course"></lister> 

これは3つのコンポーネントを使用する現在の方法です。彼らは共通のコントローラとサービスを共有します。

Answer 1

APIはお客様のケースでは異なる場合がありますが、共通のコントローラとサービスがあります。したがって、3つの配列を宣言して、教師、学生、およびコースをサービスに格納します。

app.service('myService', function{ 
    vm = this; 
    vm.teachers = []; 
    vm.students = []; 
    vm.courses = []; 
}); 

データを取得するためのAPIコールがあります。

vm.getApiData = $http.get(url).then(); // url may be to get above three from api 

コントローラにしてリストを取得するには、サービス内の関数を持っている

vm.getData: function(val){ 
    return vm[val]; // value may be teachers, students and courses 
} 

は、コントローラから上記の関数を呼び出します。

$scope.teachers = myService.getData('teachers'); 
$scope.students= myService.getData('students'); 
$scope.courses= myService.getData('courses'); 

これでデータが準備完了です。要件に基づいてアクセスしてください。すべてのデータが1つの共通のオブジェクトにバインドされることができるように、すべてのlistersは、この親オブジェクトから値を割り当てるためだけのアイデア

Answer 2

は、次にコントローラに

var parent={}; 

を親オブジェクトを作成します。 例：

$scope.lister = { 
    "teacherView": "teacher", 
    "studentView": "student", 
    "courseView": "course", 
} 

としたときに：あなたはそれぞれの異なるコンポーネントためlister性質を有するという名前のオブジェクトを作成し、コントローラ内parent.course=value;

はその後、彼らはすべて一つの共通オブジェクト

Answer 3

からのデータを共有することsetDataメソッドを呼び出すと、格納されるデータとキーを受け取ると、

componentService.setData(data, lister.teacherView) 

ので、あなたがこのように取得したいデータを選択することができ、あなたのgetDataを更新：

componentService.getData(lister.teacherView) 

あなたはこのようserviceを作成することができます：

angular.module('app').service('componentService', function() { 
    var d = {}; 
    function setData(data, key){ 
     d[key] = data; 
    } 

    function getData(key){ 
     return d[key]; 
    } 
})