web-dev-qa-db-fra.com

Quand utiliser transclude 'true' et transclude 'element' dans Angular?

Quand dois-je utiliser transclude: 'true' et quand transclude: 'element'? Je ne trouve rien sur transclude: 'element' dans la documentation angular, elles sont assez déroutantes.

Je serais heureux si quelqu'un pouvait expliquer cela dans un langage simple. Quel est l'avantage de chaque option? Quelle est la vraie différence entre eux?

Voici ce que j'ai trouvé:

transclude: true

Dans une fonction de compilation, vous pouvez manipuler le DOM à l'aide de la fonction de liaison transclude ou insérer le DOM transclude dans le modèle à l'aide de la directive ngTransclude sur n'importe quelle balise HTML.

et

transclude: ‘element’

Ceci inclut tout l'élément et une fonction de liaison transclude est introduite dans la fonction de compilation. Vous ne pouvez pas accéder à la portée ici car celle-ci n'est pas encore créée. La fonction Compile crée une fonction de lien pour la directive qui a accès à scope et transcludeFn vous permet de toucher l'élément cloné (qui a été transcluté) pour la manipulation DOM ou d'utiliser les données liées à scope. Pour votre information, cela est utilisé dans ng-repeat et ng-switch.

angularjsangularjs-directiveangularjs-ng-transclude
174
LauroSkr

De Documentation AngularJS sur les directives :

transclude - compile le contenu de l'élément et le met à la disposition de la directive. Généralement utilisé avec ngTransclude. L'avantage de la transclusion est que la fonction de liaison reçoit une fonction de transclusion qui est pré-liée à la portée correcte. Dans une configuration typique, le widget crée une étendue d'isolement, mais la transclusion n'est pas un enfant, mais un frère de l'étendue d'isolement. Cela permet au widget d'avoir un état privé et la transclusion d'être liée à la portée parent (pré-isolée).

true - transclude le contenu de la directive.

'element' - transclude l'élément entier, y compris les directives définies avec une priorité inférieure.

transclude: true

Alors disons que vous avez une directive appelée my-transclude-true déclarée avec transclude: true qui ressemble à ceci:

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

Après la compilation et avant la liaison, cela devient:

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

Le contenu (enfants) de my-transclude-true qui est <span>{{ something }}</span> {{... est transclus et disponible pour la directive.

transclude: 'élément'

Si vous avez une directive appelée my-transclude-element déclarée avec transclude: 'element', qui ressemble à ceci:

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

Après la compilation et avant la liaison, cela devient:

<div>
   <!-- transcluded -->
</div>

Ici, l'élément entier , y compris ses enfants , est inclus et mis à la disposition de la directive.

Qu'est-ce qui se passe après la liaison?

Il appartient à votre directive de faire ce qu’elle doit faire avec la fonction transclude. ngRepeat utilise transclude: 'element' pour pouvoir répéter l'élément en entier et ses enfants lorsque la portée change. Toutefois, si vous devez uniquement remplacer la balise et conserver son contenu, vous pouvez utiliser transclude: true avec la directive ngTransclude qui le fait pour vous.

226
sirhc

Lorsqu'elle est définie sur true, la directive supprime le contenu d'origine, mais le rend disponible pour une réinsertion dans votre modèle via une directive appelée ng-transclude.

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

rendu du navigateur: "Bonjour à tous."

33
user2680139

La meilleure façon de penser à la transclusion est un cadre photo. Un cadre a son propre design et un espace pour l’ajout de la photo. Nous pouvons décider quelle image ira à l’intérieur . enter image description here

En ce qui concerne angular, nous avons une sorte de contrôleur avec sa portée et à l'intérieur de celui-ci, nous placerons une directive qui prend en charge la transclusion. Cette directive aura son propre affichage et ses propres fonctionnalités. Dans la directive non traduite, le contenu à l'intérieur de la directive est décidé par la directive elle-même mais avec la transclusion, tout comme un cadre d'image, nous pouvons décider de ce qui sera à l'intérieur de la directive.

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

Contenu de la directive 

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

Directive sur les appels 

<body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

Exemple

7
Code-EZ