2016-02-09 14 views
39

新しいAngularJS 1.5コンポーネントコンセプト(ディレクティブの場合のような)に「置き換え」オプションがないようです。角度コンポーネント:テンプレート置換オプションなし?

テーブル行<TR>要素をコンポーネントにしたいとお考えですか?有効なHTMLの面で可能ではありませんか?

実際の例:mailBoxコンポーネントの内部にメールコンポーネントがあります。マークアップによるメールボックスコンポーネントはテーブルであり、メールボックスはtrです。

<mail-box> 
    <mail ng-repeat="mail in $ctrl.mails" mail="mail"></mail> 
<mail-box> 

UPD:ディレクティブに関する関連議論 - Why is replace deprecated in AngularJS?

+0

に魔法をされません厳密な構造要件を持つマークアップとCSSを使用してください。 'mail'は正確に何をするのですか?ほとんどの場合、メールボックスはその機能とテンプレート全体を吸収しなければなりません。 – estus

+0

各メールを別々のコンポーネントにしたい –

+0

それは指令であり、コンポーネントではありません。コンポーネントは自己完結型のUIウィジェットであることを意図しています。詳細についてはWebコンポーネントを参照してください。 – estus

答えて

20

これは、角度ウェイもはや可能ではないので交換してください:trueフラグが廃止されました

Why is replace deprecated in AngularJS?

replace:trueフラグが解決策より多くの問題を引き起こしていたなぜそれが取り除かれたのですか? したがって、このような方法でディレクティブを作成して、有効なtable-tr-tdマークアップを提供することはできません。これは見た目ほど悪くない理由

しかし、2つの理由があります。

  1. あなたは、テーブルなしでやりたいすべてを行うことができ、TR、TDなどをdiv要素のような だけ使用して要素、スパンなど、いくつかのCSSがあります。

  2. ウェブコンポーネント(およびディレクティブは、 をシミュレートする最初の試みでした)は、このようなマークアップの小さな断片を表すものではありません。 実際には完全に機能するコンポーネントと考えられています。 何かしています。だから、あなたがあなたのことでやりたいことが何であれ それは要素のディレクティブを構築する価値があると思う、それは おそらくisnt。

  3. たぶん

、何を行うことができますする代わりに、属性ディレクティブを使用している:

<tr my-mail-directive></tr> 

とご自分のメール・ディレクティブは、解決策はないにtr要素

+1

ドキュメントが正しく理解されていれば、コンポーネントの属性も不可能です。 "制限する:いいえ(要素にのみ制限されます)" – bersling

+0

@PatrickKelleterあなたが使用している言葉は混乱の原因となります。コンポーネントは指令、指令ではありませんAngular2の一部ではありません。単純で、コンポーネントは指令を指示するだけのものです。 –

+0

@BrianOgden OLD elment-directives(ng1、restrict: 'E')は現在ng2ではOLD属性ディレクティブ(ng1、restrict: 'A')はng2のディレクティブとして認識されません。 YES - ng2にディレクティブがあります。ディレクティブがng2の一部ではないと言っているのは間違っています。 https://angular.io/docs/ts/latest/guide/attribute-directives.htmlのドキュメントをチェックしてください –