Kiedy używać transclude 'true' i transclude 'element' w Angular?

Question

Kiedy używać transclude 'true' i transclude 'element' w Angular?

Kiedy należy stosować transclude: 'true' i kiedy transclude: 'element'? Nie mogę znaleźć nic o transclude: 'element' w angular docs, są one dość mylące.

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

Oto co znalazłem:

transclude: true
Wewnątrz funkcji kompilacji, można manipulować DOM za pomocą funkcji transclude linking lub można wstawić transcluded DOM do szablonu za pomocą dyrektywy ngTransclude na dowolnym znaczniku HTML.

I

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

177

angularjs angularjs-directive angularjs-ng-transclude

Author: Flip, 2013-08-26

Source

3 answers

Gdy ustawione jest na true, dyrektywa usunie oryginalną treść, ale udostępni ją do ponownego umieszczenia w Twój szablon poprzez dyrektywę 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>

Render przeglądarki: "Witaj świecie."

33

Author: André Dion,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-15 13:46:29

Najlepszym sposobem myślenia o transcluzji jest ramka na zdjęcia.Ramka na zdjęcia ma swój własny projekt i miejsce na dodanie obrazu.Możemy zdecydować, jaki obraz znajdzie się w środku.

Jeśli chodzi o angular, mamy jakiś kontroler z jego zakresem, a wewnątrz niego umieścimy dyrektywę, która wspiera transclusion. Ta dyrektywa będzie miała swój własny wyświetlacz i funkcjonalność . W dyrektywie nieinterpretowanej o treści wewnątrz dyrektywy decyduje sama dyrektywa, ale przy transcluzji, podobnie jak ramka na zdjęcia, możemy zdecydować, co będzie wewnątrz dyrektywy.

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>

Call Directive

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

Przykład

8

Author: Code-EZ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-30 20:59:13

score 231 · Accepted Answer

Z AngularJS dokumentacja dyrektyw :

transclude - skompilować treść elementu i udostępnić go dyrektywie. Zazwyczaj używany z ngTransclude. Zaletą transclusion jest to, że funkcja łączenia otrzymuje funkcję transclusion, która jest wstępnie związana z prawidłowym zakresem. W typowej konfiguracji widżet tworzy zakres izolowany, ale transclusion nie jest potomkiem, ale rodzeństwem zakresu izolowanego. Umożliwia to widżet ma mieć stan prywatny, a transkluzja ma być powiązana z obszarem nadrzędnym (pre-isolate).

true - przeklasyfikować treść dyrektywy.

'element' - obejmuje cały element wraz z dyrektywami zdefiniowanymi na niższym priorytecie.

Transclude: true

Powiedzmy, że masz dyrektywę o nazwie my-transclude-true zadeklarowaną przez transclude: true, która wygląda tak:

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

Po skompilowaniu i przed połączeniem tego staje się:

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

Zawartość (dzieci) z my-transclude-true, która jest <span>{{ something }}</span> {{..., jest transkludowana i dostępna dla dyrektywy.

Transclude: 'element'

Jeśli masz dyrektywę o nazwie my-transclude-element zadeklarowaną przez transclude: 'element', która wygląda tak:

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

Po kompilacji i przed linkowaniem staje się to:

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

Tutaj, cały element wraz z jego dziećmi są transkludowane i udostępniane dyrektywie.

Co się dzieje po linkowanie?

To zależy od twojej dyrektywy, aby zrobić to, co musi zrobić z funkcją transclude. ngRepeat używa transclude: 'element' tak, że może powtórzyć cały element i jego dzieci, gdy Zakres się zmieni. Jeśli jednak potrzebujesz tylko zastąpić znacznik i zachować jego zawartość, możesz użyć transclude: true z dyrektywą ngTransclude, która robi to za Ciebie.