2016-03-28 5 views
11

私はAngularJS 1.5に 'news'というカスタムディレクティブを書いています。次のようにAngularJSオプションのng-transclude

それはレイアウトですが次のとおりです。

<div class="row"> 
    <div class="largeText shadow1" ng-transclude="heading"></div> 
    <div class="mediumText shadow2" ng-transclude="content"></div> 
</div> 

次のようにこのディレクティブのJavaScriptファイルは次のとおりです。

return {   
    restrict: 'E', 
    transclude: { 
     'heading': 'heading', 
     'content': 'content' 
    }, 
    scope: { 
     //Some parameters here 
    }, 
    templateUrl: '/directives/news.html' 
}; 

ご覧のとおり、私のニュースディレクティブは、見出しと内容フィールドと呼ばれ、2人の子供を持っています。次のように使用できます。

<news> 
    <heading> 
     //Any content goes here 
    </heading> 
    <content> 
     //Any content goes here 
    </content> 
</news> 

これまでのところ、このディレクティブは正常に動作します。つまり、見出しとコンテンツのセクションに内容が入っている限り、その指示は期待どおりに表示されます。しかし、私はこれらの排他スロットを必須ではないようにしようとしています。ディレクティブを次のように使用するときはいつでも:AngularJSはコンテンツスロットを満たしていないというエラーを投げます。これらのスロットをオプションにすることはこれまで可能ですか?

答えて

18

実際の文書のどこにあるのかは分かりませんが、私が見た例に基づいて、?を使用してスロットをオプションにすることができます。

例:

transclude: { 
    'heading': 'heading', 
    'content': '?content' 
} 

これはhttps://docs.angularjs.org/api/ng/directive/ngTransclude#multi-slot-transclusionでの角度のドキュメントの例から来ています。それはapp.jsにあります

あなたはまた、スロットは、このような何かをすることによって、オプションである場合にデフォルトを追加することができます。

<div class="largeText shadow1" ng-transclude="heading">Default stuff for the slot goes here</div> 


編集は:実際に私は、マニュアルでそれを見つけました。これは、このセクションhttps://docs.angularjs.org/api/ng/service/$compile#transclusionで述べている:要素セレクタが?付いている

場合、そのスロットは任意です。 たとえば、{ slotA: '?myCustomElement' }のオブジェクトは、$transclude関数またはngTranscludeディレクティブを介してアクセスできるslotAスロットに<my-custom-element>要素をマップします。

+0

私が探しているのは、ありがとう! –

関連する問題