Comment utiliser la fonctionnalité “remplacer” pour les directives AngularJS personnalisées?

Pourquoi replace=true ou replace=false n’a aucun impact dans le code ci-dessous?

Pourquoi le “certains contenus existants” n’est-il pas affiché lorsque replace = false?

Ou, pour le dire plus humblement, pouvez-vous expliquer avec gentillesse quelle est la fonction replace=true/false dans les directives et comment l’utiliser?

Exemple

JS / Angular:

  angular.module('scopes', []) .controller('Ctrl', function($scope) { $scope.title = "hello"; }) .directive('myDir', function() { return { ressortingct: 'E', replace: true, template: '
{{title}}
' }; });

HTML:

 

some existing content

Regardez-le dans Plunker ici:

Lorsque vous avez replace: true vous obtenez le morceau suivant de DOM:

 
hello

alors que, avec replace: false vous obtenez ceci:

 
hello

Ainsi, la propriété replace dans les directives indique si l’élément auquel la directive est appliquée ( dans ce cas) doit restr ( replace: false ) et le modèle de la directive doit être ajouté en tant qu’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 (auxquels la directive est appliquée) seront perdus. Si vous souhaitez conserver le contenu / les enfants d’origine de l’élément, vous devrez le traduire. La directive suivante le ferait:

 .directive('myDir', function() { return { ressortingct: 'E', replace: false, transclude: true, template: '
{{title}}
' }; });

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

Voir l’exemple de la traduction http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Voir ceci pour en savoir plus sur la translusion.

replace:true est obsolète

De la documentation:

replace ([DEPRECATED!], sera supprimé dans la prochaine version majeure – c.-à-d. v2.0)

spécifier 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 complète de la directive AngularJS

De GitHub:

Caitp– C’est déconseillé parce qu’il y a des problèmes connus, très stupides, avec replace: true , dont un certain nombre ne peut pas vraiment être résolu de manière raisonnable. Si vous êtes prudent et évitez ces problèmes, alors plus de puissance pour vous, mais pour le bénéfice des nouveaux utilisateurs, il est plus facile de leur dire simplement que “cela vous donnera mal à la tête, ne le faites pas”.

– AngularJS Issue # 7636