Khi nào nên sử dụng transclude 'true' và transclude 'Element' trong Angular?

Khi nào tôi nên sử dụng transclude: 'true'và khi transclude: 'element'nào? Tôi không thể tìm thấy bất cứ điều gì về transclude: 'element'các tài liệu góc cạnh, chúng khá khó hiểu.

Tôi sẽ rất vui nếu ai đó có thể giải thích điều này bằng ngôn ngữ đơn giản. Lợi ích của mỗi lựa chọn là gì? Sự khác biệt thực sự giữa họ là gì?

Đây là những gì tôi đã tìm thấy:

transclude: true

Bên trong chức năng biên dịch, bạn có thể thao tác DOM với sự trợ giúp của chức năng liên kết chuyển mã hoặc bạn có thể chèn DOM được nhúng vào mẫu bằng cách sử dụng lệnh ngTransclude trên bất kỳ thẻ HTML nào.

và

transclude: ‘element’

Điều này bao gồm toàn bộ phần tử và một hàm liên kết transclude được giới thiệu trong hàm biên dịch. Bạn không thể có quyền truy cập vào phạm vi ở đây vì phạm vi chưa được tạo. Hàm biên dịch tạo ra một hàm liên kết cho lệnh có quyền truy cập vào phạm vi và transcludeFn cho phép bạn chạm vào phần tử được sao chép (đã được nhúng) để thao tác DOM hoặc sử dụng dữ liệu được liên kết với phạm vi trong đó. Đối với thông tin của bạn, điều này được sử dụng trong ng-repeat và ng-switch.

Từ Tài liệu AngularJS về Chỉ thị :

transclude- biên dịch nội dung của phần tử và làm cho nó có sẵn cho lệnh. Thường được sử dụng với ngTransclude. Ưu điểm của loại trừ là chức năng liên kết nhận được chức năng loại trừ được liên kết trước với phạm vi chính xác. Trong một thiết lập điển hình, widget tạo ra một phạm vi cô lập, nhưng loại trừ không phải là một đứa trẻ, mà là anh chị em của phạm vi cô lập. Điều này làm cho tiện ích có thể có trạng thái riêng tư và loại trừ được ràng buộc với phạm vi cha mẹ (cách ly trước).

true - bao gồm nội dung của chỉ thị.

'element' - bao gồm toàn bộ phần tử bao gồm mọi chỉ thị được xác định ở mức ưu tiên thấp hơn.

transclude: đúng

Vì vậy, giả sử bạn có một lệnh được gọi là my-transclude-truekhai báo transclude: truegiống như thế này:

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

Sau khi biên dịch và trước khi liên kết, điều này trở thành:

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

Các nội dung (trẻ em) của my-transclude-trueđược <span>{{ something }}</span> {{..., được nhúng và có sẵn cho các chỉ thị.

transclude: 'phần tử'

Nếu bạn có một lệnh được gọi là my-transclude-elementkhai báo với transclude: 'element'hình như sau:

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

Sau khi biên dịch và trước khi liên kết, điều này trở thành:

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

Ở đây, toàn bộ phần tử bao gồm các phần tử con của nó được nhúng và cung cấp cho lệnh.

Điều gì xảy ra sau khi liên kết?

Điều đó tùy thuộc vào chỉ thị của bạn để làm những gì nó cần làm với chức năng chuyển mã. ngRepeatsử dụng transclude: 'element'để nó có thể lặp lại toàn bộ phần tử và phần tử con của nó khi phạm vi thay đổi. Tuy nhiên, nếu bạn chỉ cần thay thế thẻ và muốn giữ lại nội dung của nó, bạn có thể sử dụng transclude: truevới ngTranscludechỉ thị thực hiện điều này cho bạn.

Khi được đặt thành true, lệnh sẽ xóa nội dung gốc, nhưng làm cho nó có sẵn để đặt lại trong mẫu của bạn thông qua một lệnh gọi là ng-transclude.

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


<div directive-name>world</div>

trình duyệt kết xuất: hoàng Xin chào thế giới.

Cách tốt nhất để suy nghĩ về việc loại trừ là Khung hình. Khung ảnh có thiết kế riêng và không gian để thêm ảnh. Chúng tôi có thể quyết định ảnh nào sẽ đi vào bên trong nó.

Khi nói đến góc cạnh, chúng ta có một số loại bộ điều khiển với phạm vi của nó và bên trong đó chúng ta sẽ đặt một lệnh hỗ trợ loại trừ. Lệnh này sẽ có màn hình và chức năng riêng. Trong chỉ thị không được loại trừ, nội dung bên trong chỉ thị được quyết định bởi chính lệnh đó nhưng với loại trừ, giống như khung hình, chúng ta có thể quyết định nội dung bên trong chỉ thị.

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


    }

});

Nội dung bên trong chỉ thị

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

Chỉ thị cuộc gọi

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

Thí dụ