2016-11-23 7 views
1

角度1.5.8のコンポーネント内でのtranscludeに関する質問です。transludeを使用するには、角度1.5を使用してください。

ここにいくつかのコードの例を示します。

var app = angular.module('app', []) 

function AccordionController() { 
    var self = this; 
    // add panel 
    self.addPanel = function(panel) { 
    // code to add panel 
    } 

    self.selectPanel = function() { 
    //code to select panel 
    } 
} 

// register the accordion component 
app.component('accordion', { 
    template: '<!---accordion-template-->', 
    controller: AccordionController 
} 

function AccordionPanelController() { 
    // use parents methods here 
    var self = this; 

    // add panel 
    self.parent.addPanel(self); 

    // select panel 
    self.parent.selectPanel(self); 
} 

// register the accordion-panel component 
app.component('accordionPanel', { 
    // require the parent component 
    // In this case parent is an instance of accordion component 
    require: { 
    'parent': '^accordion', 
    template: '<!---accrodion-panel-template-->', 
    controller: AccordionController 
} 

私の質問は、それがtranscludeを使用して、親内の全ての係るパネル入れ子に良好であるか、または代替的に、これは内部渡された配列に基づいて、パネルの必要な数をループ親へのデータアレイに渡すありますバインディングを使って

おかげ

//

多くのおかげでお返事、私はおそらく、我々はモーダルを持っている。ここ

<modal modal-id="editCompany" title="Edit Company"> <company-form company="$ctrl.company"></company-form> </modal> 

次のコードビットである必要がtranscludeの持っ例えば追加上記の例では、私は会社のフォームを追加していますが、これは連絡フォームになる可能性があります。別の方法がありますか?

答えて

0

私は非常に広範囲に角度を使って作業しました。大量のデータを管理して表示する2つのエンタープライズツール、数十種類のインタラクティブなウィジェットモジュールなど。

決して一度も、私は転写体とは関係がありませんでした。職場では、明示的に使用しないように指示されています(リンク機能もあります)。私はこれが良いことだと思っていたし、Angular 2が判明した方法は、思考が全く理由がないわけではないようだった。

私は必要な数のアイテムをレイアウトするために繰り返しを行います。職場では、transcludeはオプションではないので、これは選択肢ではありません。

+0

多くのおかげで、transcludeの私が持っている例は、おそらく必要であることは、コード '<モーダルモーダル-ID =「editCompany」タイトル=「編集会社」>の以下のビットである <会社-form company = "$ ctrl.company"> ここには、上記の例で使用されているさまざまな他のコンポーネントがあるかもしれないモーダルコンポーネントがあります。私は会社を追加していますしかし、これは連絡フォームになる可能性があります。別の方法がありますか? –

+0

絶対に。サービスを利用する。私が書いた1つのアプリケーションは、入れ子にされたコンポーネントでポップアップを必要とします(私は実際には全体的なUXを嫌いですが、時には意味をなさない)。ポップアップディレクティブコントローラに注入されるPopupServiceという名前のものを作成しました。 あなたのデータをアプリケーションの完全に別個のレイヤーとして扱い、ビュー階層の上下にイベントを送信するのではなく、サービスを使用してデータを保持して提供することは、よりクリーンです。私は階層のどこにコンポーネントがあるのか​​、あなたはすべきではありません。 UIマークアップを書き直すと、コードが壊れてしまいます。 –

0

コンポーネントアーキテクチャでtranscludeを使用することは、単一の責任という概念を視覚的に壊し、アーキテクチャを混乱させることです。

<html> 
    <navigation></navigation> 
    <accordion> 
    <accordion-panel></accordion-panel> 
    </accordion> 
    <footer></footer> 
</html> 

この例では、ページにナビゲーションメニュー、アコーディオンとフッターがあることがわかります。しかし、インデックスレベル(またはルートコンポーネント)では、アコーディオンが何を含んでいるかを知りたくありません。

したがって、アコーディオンパネルのコンポーネントは直接の親コンポーネントにのみ表示する必要があります。

その他の質問として、requireまたはattributesを使用すると、アコーディオンコンポーネント内でng-repeatを使用して反復するパネルの配列を渡します。お返事のための

app.component('accordion', { 
    template: `<accordion-panel ng-repeat="..."></accordion-panel>`, 
    controller: AccordionController 
} 
+0

パーフェクト、ありがとう、 –

関連する問題