属性ディレクティブをトランスクルード ディレクティブに動的に追加しようとしています。
たとえば、テンプレートは次のように始まります。
<div class="container">
<div ng-transclude></div>
</div>
イベント (クリックなど) が発生すると、次のような属性ディレクティブが追加されます。
<div class="container" some-directive>
<div ng-transclude></div>
</div>
これを行うために、次の JavaScript を使用しています。
div = angular.element("#demoParentDirective .container").clone();
div.attr('some-directive','');
div = $compile(div)($scope);
angular.element("#demoParentDirective .container").replaceWith(div);
ただし、これにより次の結果が得られます。
Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-transclude="">
私がどのようにやっているかを示すために、Plunker でやろうとしていることの簡素化されたデモを作成しました。
http://plnkr.co/edit/xIKwJqKFbvs6DVnJrDUh?p=preview
どんな助けでも大歓迎です。ありがとう。
アップデート：
リクエストに応じて、私が達成しようとしていることを達成するためのより良い方法があるかどうかを尋ねるフォローアップの質問を作成しました。