So ersetzen Sie das Element durch ng-transclude

Question

Ist es möglich, das Element mit ng-transclude anstelle des gesamten Vorlagenelements zu ersetzen?

HTML:

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

Richtlinie:

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

    } 
}; 

my-transkludiert-directive.html:

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

Was ich bin Auf der Suche nach ist ein Weg zu <div>{{someData}}</div> ersetzen <div ng-transclude></div>. Was derzeit passiert ist, dass das übersetzte HTML innerhalb der ng-transclude div-Element platziert wird.

Ist das möglich?

Answer 1

Ich denke, die beste Lösung wäre wahrscheinlich, Ihre eigene Transclude-Replace-Direktive zu erstellen, die damit umgehen würde. Aber für eine schnelle und schmutzige Lösung Ihres Beispiel könnten Sie im Wesentlichen platzieren manuell das Ergebnis der Einbindung, wo Sie wollen:

my-transkludiert-directive.html:

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

Richtlinie:

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

Es ist einfach eine ng-transclude-replace Richtlinie zu schaffen, hier ist ein Nachahmer der ursprünglichen 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: Sie können auch this link überprüfen Sie die Differenz zwischen dem ng-transclude

Answer 3

das funktioniert in Angular 1.4.9 (und prob früher auch)

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