2016-04-30 4 views
0

私は、コンポーネントを使用するための角度1.5に私のSPAを準備しようとしているとこのような理由のために私は、この方式で2つのディレクティブ(将来的にはコンポーネント)に私のページを分割:接続(アンギュラ1.4.8)

playlistManagingディレクティブでPlaylist.html

<playlist-managing></playlist-managing> 
<song-list></song-list> 

私はsongListディレクティブに配置されたフィルタリングの曲に働かを持つ必要があります。だから、これを行う最善の方法は何ですか?私は$スコープでイベントを使用することができますが、私はそれが良い解決策だとは思いません。

ありがとうございます。

答えて

1

ディレクティブ間のデータ共有には多くの方法があります。ファースト・サービスとそれとデータを共有する方法があります。第2の方法はディレクティブの共有コントローラです。第3の方法は親コントローラにデータを保持することです。これらのディレクティブを使用して、共有データをディレクティブに与えるための属性を使用します。次に、親コントローラとディレクティブの間のスコープを共有する共有スコープディレクティブを使用する方法を示します。

共有コントローラ: https://thinkster.io/a-better-way-to-learn-angularjs/directive-to-directive-communication

工場サービス:http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

共有スコープディレクティブ:angularjsでhttp://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/11/understanding-scopes-in-angularjs-custom-directives.aspx

+0

私は第三の方法は、 – rkalita

+0

は、スコープのデータに分離されたスコープディレクティブを使用し、「=」私のために最善の方法だと思い、ありがとう:https://blog.umur.io/2013/07/02/angularjs-ディレクティブ-使用して、孤立スコープ付き-属性/ –

+0

はい、私はディレクティブで約2ウェイバインディングを知っている:) – rkalita

1

ディレクティブは、独立して、指令にコントローラからデータをバインドするために使用される単離された範囲を提供します。だから、それぞれのディレクティブを通じて結合双方向のデータを使用してディレクティブにコントローラからスコープを渡すことができます。ここではそのいくつかの例です:

まずあなたは、コントローラで範囲を初期化する必要があります。その後、

.controller('playlistController', function() { 
    $scope.songType = 'pop'; 
} 

と結合双方向のデータで隔離スコープを経由して各ディレクティブに範囲を渡します各ディレクティブの内側

.directive('playlistManaging').function({ 
    return { 
     scope: { 
      songType: '=' 
     }, 
     controller: function() { 
      //some logic here 
     } 
    } 
}) 

.directive('songList').function({ 
    return { 
     scope: { 
      songType: '=' 
     }, 
     controller: function() { 
      //some logic here 
     } 
    } 
}) 

次にHTML属性要素を通してスコープを接続します。

//This is just a quick sample, the best solution is to define the controller inside angular routes 
<div ng-controller="playlistController"> 
    <playlist-managing song-type="songType"></playlist-managing> 
    <song-list song-type="songType"></song-list> 
</div> 

希望します。