要素をng-transcludeに置き換える方法

Question

テンプレート要素全体ではなく、要素をng-transcludeに置き換えることは可能ですか？

HTML：

<div my-transcluded-directive> 
    <div>{{someData}}</div> 
</div> 

指令：

return { restrict:'A', templateUrl:'templates/my-transcluded-directive.html', transclude:true, link:function(scope,element,attrs) { } }; 

私-トランスクルード-directive.html：私は何

<div> 
    <div ng-transclude></div> 
    <div>I will not be touched.</div> 
</div> 

お探しの方は<div>{{someData}}</div>を<div ng-transclude></div>に置き換えてください。現在起こっているのは、がng-transclude div要素の内側に配置されていることです。

これは可能ですか？

Answer 1

私は最高の解決策はおそらく、これを処理する独自のtransclude-replace指示を作成することだと思います。しかし、あなたの例に迅速かつ汚いソリューションのためのあなたは、本質的に手動であなたが望むトランスクルーの結果を置くことができます：

は

私-トランスクルード-directive.html：

<div> 
    <span>I WILL BE REPLACED</span> 
    <div>I will not be touched.</div> 
</div> 

指令：

return { 
    restrict:'A', 
    templateUrl:'templates/my-transcluded-directive.html', 
    transclude:true, 
    link:function(scope,element,attrs,ctrl, transclude) 
    { 
     element.find('span').replaceWith(transclude()); 
    } 
}; 

Answer 2

ng-transclude-replaceディレクティブを作成するのは簡単です。ここにはオリジナルのコピーキットng-transcludeがあります。

directive('ngTranscludeReplace', ['$log', function ($log) { 
       return { 
        terminal: true, 
        restrict: 'EA', 

        link: function ($scope, $element, $attr, ctrl, transclude) { 
         if (!transclude) { 
          $log.error('orphan', 
            'Illegal use of ngTranscludeReplace directive in the template! ' + 
            'No parent directive that requires a transclusion found. '); 
          return; 
         } 
         transclude(function (clone) { 
          if (clone.length) { 
           $element.replaceWith(clone); 
          } 
          else { 
           $element.remove(); 
          } 
         }); 
        } 
       }; 
      }]); 

PS：あなたも、これは角度1.4.9で動作します（とあまりにも早くPROB）ng-transclude

Answer 3

の違いを見るためにthis linkを確認することができます

return { 
     restrict: 'E', 
     replace: true, 
     template: '<span data-ng-transclude></span>', 
     transclude: true, 
     link: function (scope, el, attrs) ......... 
}