Angularjs

トランスクルージョンコンテンツがangularjsディレクティブに指定されているかどうかを検出します



Detect If Transclude Content Has Been Given



解決：

マルチスロットトランスクルージョンを備えたAngularv1.5のリリース後は、さらに簡単になります。たとえば、あなたが使用した代わりにコンポーネントディレクティブであり、にアクセスできませんリンクまたはコンパイル関数。それでもあなたはにアクセスできます$ transcludeサービス。したがって、「公式」メソッドを使用してコンテンツの存在を確認できます。

app.component（ 'myTransclude'、{transclude：{'slot'： '？transcludeSlot'}、controller：function（$ transclude）{this.transcludePresent = function（）{return $ transclude.isSlotFilled（ 'slot'）;} ;}}）
このようなテンプレートで：

 
 
 ..。 
@Ilanのソリューションに基づいて、この単純な$ transclude関数を使用して、トランスクルージョンされたコンテンツがあるかどうかを知ることができます。
 
$ transclude（function（clone）{if（clone.length）{scope.hasTranscluded = true;}}）;
トランスクルージョンするものがない場合にデフォルトのコンテンツを設定するためにng-ifを使用してこのアプローチを示すPlnkr：http：//plnkr.co/hHr0aoSktqZYKoiFMzE6
 
 
  
ここにプランカーがあります：http：//plnkr.co/edit/ednJwiceWD5vS0orewKW？p = Preview
 
リンク関数内でトランスクルージョンされた要素を見つけて、その内容を確認できます。
 
  指令：  
 
 
 
app.directive（ 'progressbar'、function（）{return {scope：{}、transclude：true、templateUrl： 'progressbar.html'、link：function（scope、elm）{var transcluded = elm.find（ 'span' ）.contents（）; scope.withLabel = transcluded.length> 0; // trueまたはfalse}}}）
  レンプレート：  
 
 ..。
 
次のように、カスタムトランスクルージョンディレクティブを作成することもできます。
 
app.directive（ 'myTransclude'、function（）{return {link：function（scope、elm、attrs、ctrl、$ transclude）{$ transclude（function（clone）{//これで何かをする：// if（clone .length> 0）... elm.empty（）; elm.append（clone）;}）}}}）