ディレクティブのトランスコードされたコントローラにデータを動的に渡す

Question

私は単一のポップアップ要素の指示を持っています。クリックされた何百もの要素のどれに応じて、表示されるときにポップアップに別のデータを渡す必要があります。サービスを使用してデータを格納/フェッチすることは、サイドバンドのハッキングのように思えます。トップレベルのコントローラーにデータを格納し、ポップアップコントローラーが継承できるようにするのは、カプセル化が不十分なようです。私はディレクティブにスコープを分離し、ポップアップコントローラにそれを継承させたいと思います。これはうまくいかないようです。何かご意見は？ $ブロードキャストは私の唯一のオプションですか？

Answer 1

あなたはAngularJS 1.xで作業していると仮定します。私はTransclusionがあなたが探しているものだと思っています。 Transclusionは、ディレクティブのコンテンツ領域内の親コントローラにバインドされたマークアップを含める方法を提供します。

から取られたPlunkerをチェックしてください。

.directive('pane', function() { 
    return { 
     restrict: 'E', 
     transclude: { 
     'title': '?paneTitle', 
     'body': 'paneBody', 
     'footer': '?paneFooter' 
     }, 
     template: '<div style="border: 1px solid black;">' + 
        '<div class="title" ng-transclude="title">Fallback Title</div>' + 
        '<div **ng-transclude="body"**></div>' + 
        '<div class="footer" **ng-transclude="footer"**>Fallback Footer</div>' + 
       '</div>' 
    }; 

<div ng-controller="ExampleController"> 
    <input ng-model="title" aria-label="title"> <br/> 
    <textarea ng-model="text" aria-label="text"></textarea> <br/> 
    <pane> 
    <pane-title><a ng-href="{{link}}">{{title}}</a></pane-title> 
    <pane-body><p>{{text}}</p></pane-body> 
    </pane> 
</div> 

ペーンが指令です。 pane-titleおよびpane-bodyに含まれるコンテンツは、親コントローラに対してコンパイルされていますが、ディレクティブマークアップのng-transclude部分に表示されます。

あなたはサービスや$ブロードキャストを必要とせずにカスタムデータをポップアップに取り込むことができるはずです。