webentwicklung-frage-antwort-db.com.de

So ersetzen Sie das Element mit ng-transclude

Ist es möglich, das Element durch 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)
    {

    }
};

meine-Transclosed-Direktive.html: 

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

Was ich suche, ist eine Möglichkeit, <div>{{someData}}</div><div ng-transclude></div> zu ersetzen. Derzeit passiert das transkludierte HTML-Element in dem ng-transclude div-Element.

Ist das möglich?

angularjsangularjs-directive
33
Francisc

Ich denke, die beste Lösung wäre wahrscheinlich, eine eigene Transclude-Replacement-Direktive zu erstellen, die damit umgehen würde. Aber für eine schnelle und schmutzige Lösung Ihres Beispiels könnten Sie das Ergebnis der Transklusion im Wesentlichen manuell an die gewünschte Stelle setzen:

meine-Transclosed-Direktive.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());
    }
};
38
swehren

Es ist einfach, eine ng-transclude-replace-Direktive zu erstellen. Hier ist eine Kopie des 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 diesen Link prüfen, um den Unterschied zwischen dem ng-transclude zu sehen.

29
gogoout

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

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

Wenn Sie IE und Edge nicht unterstützen müssen, können Sie display:contents in Ihrer css verwenden. Dadurch wird der Wrapper auf der Ebene von css zerstört. 

Weitere Informationen zu dieser neuen Anzeigeeigenschaft finden Sie hier: https://css-tricks.com/get-ready-for-display-contents/

Aktuelle Browserunterstützung (ich hoffe, zukünftig die Edge-Unterstützung zu sehen): https://caniuse.com/#feat=css-display-contents

0
Andrew Bogdanov