Kiedy używać transkludowania „prawda” i transkludowania „elementu” w Angular?

Kiedy stosować transclude: 'true'i kiedy transclude: 'element'? Nie mogę znaleźć nic transclude: 'element'w kątowych dokumentach, są dość zagmatwane.

Byłbym szczęśliwy, gdyby ktoś mógł to wyjaśnić prostym językiem. Jakie są zalety każdej opcji? Jaka jest prawdziwa różnica między nimi?

Oto, co znalazłem:

transclude: true

Wewnątrz funkcji kompilacji możesz manipulować DOM za pomocą funkcji łączenia transkludowania lub możesz wstawić transkludowany DOM do szablonu za pomocą dyrektywy ngTransclude na dowolnym tagu HTML.

i

transclude: ‘element’

To transkluduje cały element, a funkcja łącząca transkluduje jest wprowadzana do funkcji kompilacji. Nie możesz mieć dostępu do zakresu tutaj, ponieważ zakres nie został jeszcze utworzony. Funkcja kompilacji tworzy funkcję łączącą dla dyrektywy, która ma dostęp do zakresu, a transcludeFn pozwala dotknąć sklonowanego elementu (który został transkludowany) w celu manipulacji DOM lub użyć danych związanych z zakresem w nim. Dla twojej informacji, jest to używane w ng-repeat i ng-switch.

Z dokumentacji AngularJS na temat dyrektyw :

transclude- skompilować zawartość elementu i udostępnić ją dyrektywie. Zwykle używany z ngTransclude. Zaletą transkluzji jest to, że funkcja łącząca otrzymuje funkcję transkluzji, która jest wstępnie powiązana z prawidłowym zakresem. W typowej konfiguracji widget tworzy zakres izolowany, ale transkluzja nie jest elementem podrzędnym, ale rodzeństwem zakresu izolowanego. Dzięki temu widget może mieć stan prywatny, a transkluzja jest powiązana z zakresem nadrzędnym (wstępnie izolowanym).

true - zawrzeć treść dyrektywy.

'element' - uwzględnić cały element, w tym wszelkie dyrektywy zdefiniowane o niższym priorytecie.

transclude: true

Powiedzmy, że masz my-transclude-truezadeklarowaną dyrektywę o nazwie, transclude: truektóra wygląda następująco:

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

Po kompilacji i przed połączeniem otrzymujemy:

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

W treści (dzieci) z my-transclude-truektórą <span>{{ something }}</span> {{...jest dołączona i dostępna do dyrektywy.

transclude: „element”

Jeśli masz my-transclude-elementzadeklarowaną dyrektywę, transclude: 'element'która wygląda następująco:

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

Po kompilacji i przed połączeniem otrzymujemy:

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

W tym przypadku cały element, w tym jego elementy podrzędne, jest transkalowany i udostępniany dyrektywie.

Co się dzieje po połączeniu?

To zależy od twojej dyrektywy, aby zrobić to, co musi zrobić z funkcją transkludowania. ngRepeatużywa, transclude: 'element'aby mógł powtórzyć cały element i jego dzieci, gdy zakres się zmieni. Jednakże, jeśli tylko trzeba wymienić znacznik i chcą zachować jego zawartość, można korzystać transclude: truez ngTranscludedyrektywy, która robi to za ciebie.

Po ustawieniu na true dyrektywa usunie oryginalną zawartość, ale udostępni ją do ponownego umieszczenia w szablonie za pomocą dyrektywy o nazwie ng-transclude.

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


<div directive-name>world</div>

renderowanie przeglądarki: „Witaj, świecie”.

Najlepszym sposobem myślenia o transkluzji jest ramka na zdjęcia, która ma swój własny projekt i miejsce na dodanie zdjęcia, możemy zdecydować, jakie zdjęcie znajdzie się w niej.

Jeśli chodzi o angular, mamy jakiś kontroler z jego zakresem i wewnątrz niego umieścimy dyrektywę obsługującą transkluzję. Ta dyrektywa będzie miała własny wygląd i funkcjonalność. W dyrektywie nieprzekazywanej treść dyrektywy jest określana przez samą dyrektywę, ale w przypadku transkluzji, podobnie jak w przypadku ramki obrazu, możemy zdecydować, co znajdzie się w dyrektywie.

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


    }

});

Treść wewnątrz dyrektywy

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

Dyrektywa dotycząca połączeń

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

Przykład