Perché ha replace=trueo replace=falsemeno alcun impatto nel codice sottostante?

Perché "alcuni contenuti esistenti" non vengono visualizzati quando replace = false?

O in modo più umile, puoi spiegarci gentilmente qual è la replace=true/falsecaratteristica nelle direttive e come usarla?

Esempio

JS / Angolare:

<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>

Guardalo in Plunker qui:

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

Quando hai replace: trueottenuto il seguente pezzo di DOM:

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

mentre con replace: falsete ottieni questo:

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

Quindi la replaceproprietà nelle direttive si riferisce al fatto che l'elemento a cui viene applicata la direttiva ( <my-dir>in quel caso) debba rimanere ( replace: false) e il modello della direttiva debba essere aggiunto come figlio,

O

l'elemento a cui viene applicata la direttiva dovrebbe essere sostituito ( replace: true) dal modello della direttiva.

In entrambi i casi i figli dell'elemento (a cui viene applicata la direttiva) andranno persi. Se si desidera mantenere il contenuto originale / i bambini dell'elemento, è necessario trasluderlo. La seguente direttiva lo farebbe:

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

In tal caso, se nel modello della direttiva si dispone di uno o più elementi con attributo ng-transclude, il suo contenuto sarà sostituito dal contenuto originale dell'elemento (a cui viene applicata la direttiva).

Vedi esempio di traslusione http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Vedi questo per saperne di più sulla traslusione.

replace:true è obsoleto

Dai documenti:

replace ([DEPRECATO!], Verrà rimosso nella prossima versione principale, ovvero v2.0)

specificare cosa deve sostituire il modello. Il valore predefinito è false.

• true - il modello sostituirà l'elemento della direttiva.
• false - il modello sostituirà il contenuto dell'elemento della direttiva.

- API AngularJS Comprehensive Directive

Da GitHub:

Caitp-- È deprecato perché ci sono problemi noti e molto sciocchi replace: true, alcuni dei quali non possono essere risolti in modo ragionevole. Se stai attento ed eviti questi problemi, allora avrai più potere, ma a beneficio dei nuovi utenti, è più facile dire loro "questo ti farà venire il mal di testa, non farlo".

- AngularJS Issue # 7636

Aggiornare

Nota: replace: trueè deprecato e non è consigliabile utilizzarlo, principalmente a causa dei problemi elencati qui. È stato completamente rimosso nel nuovo Angular.

Problemi con la sostituzione: vero

• I valori degli attributi non vengono uniti
• Le direttive non vengono deduplicate prima della compilazione
• transclude: element nella radice del modello di sostituzione può avere effetti imprevisti

Per ulteriori informazioni, vedere

• AngularJS $ compile Service API Reference - Problemi con replace:true