Pourquoi a-t-il replace=trueou replace=falsenon un impact sur le code ci-dessous?

Pourquoi le "contenu existant" n'est-il pas affiché lorsque replace = false?

Ou pour le dire plus humblement, pouvez-vous expliquer avec bonté quelle est la replace=true/falsefonctionnalité des directives et comment l'utiliser?

Exemple

JS / Angulaire:

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

Voyez-le dans Plunker ici:

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

Lorsque vous avez, replace: truevous obtenez le morceau suivant de DOM:

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

alors que, avec replace: falsevous obtenez ceci:

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

Ainsi, la replacepropriété dans les directives se réfère à savoir si l'élément auquel la directive est appliquée ( <my-dir>dans ce cas) doit rester ( replace: false) et le modèle de la directive doit être ajouté comme son enfant,

OU

l'élément auquel la directive est appliquée doit être remplacé ( replace: true) par le modèle de la directive.

Dans les deux cas, les enfants de l'élément (auquel la directive est appliquée) seront perdus. Si vous vouliez conserver le contenu / les enfants d'origine de l'élément, vous devrez le traduire. La directive suivante le ferait:

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

Dans ce cas, si dans le modèle de la directive vous avez un élément (ou des éléments) avec attribut ng-transclude, son contenu sera remplacé par le contenu original de l'élément (auquel la directive est appliquée).

Voir l'exemple de translusion http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Voir ceci pour en savoir plus sur la translusion.

replace:true est obsolète

À partir des documents:

replace ([DEPRECATED!], Sera supprimé dans la prochaine version majeure - c'est-à-dire v2.0)

spécifiez ce que le modèle doit remplacer. La valeur par défaut est false.

• true - le modèle remplacera l'élément de la directive.
• false - le modèle remplacera le contenu de l'élément de la directive.

- API de directive complète AngularJS

Depuis GitHub:

Caitp - C'est obsolète car il y a des problèmes connus, très stupides replace: true, dont un certain nombre ne peuvent pas vraiment être résolus de manière raisonnable. Si vous êtes prudent et évitez ces problèmes, alors plus de pouvoir pour vous, mais pour le bénéfice des nouveaux utilisateurs, il est plus facile de leur dire simplement "cela vous donnera mal à la tête, ne le faites pas".

- Problème AngularJS n ° 7636

Mettre à jour

Remarque: replace: trueest obsolète et il n'est pas recommandé d'utiliser, principalement en raison des problèmes répertoriés ici. Il a été complètement supprimé dans le nouveau Angular.

Problèmes de remplacement: vrai

• Les valeurs d'attribut ne sont pas fusionnées
• Les directives ne sont pas dédupliquées avant la compilation
• transclude: element dans la racine du modèle de remplacement peut avoir des effets inattendus

Pour plus d'informations, consultez

• Référence de l'API du service AngularJS $ compile - Problèmes avec replace:true