3

私は以下のスタイルで指示を設定しました。この例では、<dir-header><dir-footer>のようなオプションの継承された要素が使用できます。AngularJS指示文でオプションの継承された要素が使用されているかどうかを検出しますか?

directive.js(部分)

module.directive('dir', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'path/template.html', 
     transclude: { 
      'header': '?dirHeader', 
      'footer': '?dirFooter' 
     }, 
     link: function (scope, elem, attrs) { 
      // do something 
     } 
    }; 
}); 

template.html

<div ng-transclude="header"> 
    <!-- Transcluded header will appear here --> 
</div> 

<div class="static-content"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div> 

<div ng-transclude="footer"> 
    <!-- Transcluded footer will appear here --> 
</div> 

使用

<dir> 
    <dir-header>My Header</dir-header> 
    <dir-footer>My Footer</dir-footer> 
</dir> 

ベース私がここにいるのは、<dir-header>が使用されているかどうかを検出する方法がありますか?渡されたコンテンツにアクセスできますか?この場合、文字列"My header"はリンク機能からですか?


私がこれまで何をやったかのいくつかの背景:

私はtransclude: {}ではなくtransclude: trueスタイルを使用して、このトピックに関するいくつかの議論を見てきました。その研究から見つかった提案に基づいて、私は次のことを試してみました:

link: function (scope, elem, attrs, $transclude) { 
    $transclude(function (clone) { 
     console.log(clone); 
    }); 
} 

私はかなりどのようにクローン作品見分けることができませんでしたが、トランスクルードされたものを表すのNodeListのようです。残念ながら、これから得られる唯一の有益な情報は長さです。上記の使用例のclone.lengthは3です(dirheaderfooter)。 footerを削除すると、長さは2になります。しかし、NodeListの要素を区別するためのデータがないように思われるので、どの継承された要素が使用されているかを知ることはできません。

最後に、特定の継承された要素が使用されているかどうかに基づいて、いくつかのスタイル条件を設定したいと思います。

+0

作業

angular.module('App', []) .directive('dir', function() { return { restrict: 'E', template: ' <div ng-transclude="header"></div> <div class="static-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div ng-transclude="footer"> ', transclude: { 'header': '?dirHeader', 'footer': '?dirFooter' }, link: function ($s, $el, $attrs, thisCtrl, $transclude) { console.log($transclude.isSlotFilled('header')) console.log($transclude.isSlotFilled('footer')) } }; }); 

?それは角度1.5.x + –

+0

のデフォルトで動作するはずです@PigBallあなたが何を参照しているのか分かりませんが、このディレクティブはうまく動作します。 – shanzilla

答えて

2

isSlotFilledファンクションのtransclude機能では、目的の結果が得られます。あなたが使用しているangularjsのバージョンplnkr

+0

ありがとう!私はなぜ他の関数が実行できるかを調べるとは思わなかったのか分かりません。 – shanzilla

関連する問題