web-dev-qa-db-fra.com

Comment utiliser la fonctionnalité 'replace' pour les directives AngularJS personnalisées?

Pourquoi replace=true ou replace=false n'a-t-il aucun 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 en quoi consiste le replace=true/false dans les directives et comment l’utiliser?

Exemple

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>

Voir à Plunker ici:

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

angularjsangularjs-directive
88
Kaya Toast

Quand vous avez replace: true vous obtenez le DOM suivant:

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

alors que, avec replace: false vous obtenez ceci:

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

Ainsi, la propriété replace dans les directives indique 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,

OR

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 devez 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 l'attribut ng-transclude, son contenu sera remplacé par celui de l'élément. (auquel la directive est appliquée) contenu original.

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

Voir this pour en savoir plus sur la translusion.

186
kamilkp

replace:true est obsolète

De la documentation:

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

De GitHub:

Caitp - Il est déconseillé car il existe des problèmes connus, très stupides, avec replace: true, dont certains ne peuvent pas être résolus de manière raisonnable. Si vous faites attention et évitez ces problèmes, vous aurez plus de pouvoir, mais pour le bénéfice des nouveaux utilisateurs, il leur sera plus facile de leur dire "cela vous donnera mal à la tête, ne le faites pas".

- numéro AngularJS # 7636

Mise à jour

Remarque: replace: true est obsolète et son utilisation est déconseillée, principalement en raison des problèmes énumérés ici. Il a été complètement supprimé dans le nouvel angulaire.

Problèmes avec replace: true

Pour plus d'informations, reportez-vous à la section Référence de l'API de service compile avec AngularJS $ - Problèmes avec replace:true .

32
georgeawg