Warum hat replace=trueoder replace=falsekeine Auswirkungen auf den Code unten?

Warum wird der "vorhandene Inhalt" nicht angezeigt, wenn replace = false?

Oder, demütiger ausgedrückt, können Sie uns bitte erklären, was die replace=true/falseFunktion in Richtlinien ist und wie man sie verwendet?

Beispiel

JS / Angular:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

          })
          .directive('myDir', function() {
            return {
              restrict: 'E',
              replace: true,
              template: '<div>{{title}}</div>'
            };
      });
</script>

HTML:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

Sehen Sie es in Plunker hier:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview

Wenn Sie haben, erhalten replace: trueSie das folgende Stück DOM:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

während, mit replace: falseIhnen bekommen Sie diese:

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

Die replaceEigenschaft in Direktiven bezieht sich also darauf, ob das Element, auf das die Direktive angewendet wird ( <my-dir>in diesem Fall), erhalten bleiben soll ( replace: false) und die Vorlage der Direktive als untergeordnetes Element angehängt werden soll.

ODER

Das Element, auf das die Direktive angewendet wird, sollte durchreplace: true die Vorlage der Direktive ersetzt ( ) werden.

In beiden Fällen gehen die Kinder des Elements (auf das die Richtlinie angewendet wird) verloren. Wenn Sie den ursprünglichen Inhalt / die untergeordneten Elemente des Elements beibehalten möchten, müssen Sie ihn übersetzen. Die folgende Richtlinie würde es tun:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

Wenn Sie in der Vorlage der Direktive ein Element (oder Elemente) mit Attribut haben ng-transclude, wird dessen Inhalt durch den ursprünglichen Inhalt des Elements (auf das die Direktive angewendet wird) ersetzt.

Siehe Beispiel für die Übersetzung http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Sehen Sie diese mehr über translusion zu lesen.

replace:true ist veraltet

Aus den Dokumenten:

replace ([DEPRECATED!] Wird in der nächsten Hauptversion entfernt - dh v2.0)

Geben Sie an, was die Vorlage ersetzen soll. Der Standardwert ist false.

• true - Die Vorlage ersetzt das Element der Direktive.
• false - Die Vorlage ersetzt den Inhalt des Direktivenelements.

- AngularJS Comprehensive Directive API

Von GitHub:

Caitp-- Es ist veraltet, weil es bekannte, sehr dumme Probleme gibt replace: true, von denen einige nicht wirklich auf vernünftige Weise behoben werden können. Wenn Sie vorsichtig sind und diese Probleme vermeiden, haben Sie mehr Macht, aber zum Nutzen neuer Benutzer ist es einfacher, ihnen einfach zu sagen, "das bereitet Ihnen Kopfschmerzen, tun Sie es nicht".

- AngularJS Issue # 7636

Aktualisieren

Hinweis: replace: trueist veraltet und wird nicht empfohlen, hauptsächlich aufgrund der hier aufgeführten Probleme. Es wurde im neuen Angular komplett entfernt.

Probleme mit Ersetzen: true

• Attributwerte werden nicht zusammengeführt
• Direktiven werden vor der Kompilierung nicht dedupliziert
• transclude: element in der Ersetzungsvorlage root kann unerwartete Auswirkungen haben

Weitere Informationen finden Sie unter

• AngularJS $ compile Service API-Referenz - Probleme mit replace:true