Ng-transclude là gì?

266

Tôi đã thấy một số câu hỏi trên StackOverflow thảo luận về ng-transclude, nhưng không có gì giải thích theo thuật ngữ của giáo dân về nó là gì.

Mô tả trong tài liệu như sau:

Chỉ thị đánh dấu điểm chèn cho DOM được nhúng của chỉ thị cha mẹ gần nhất sử dụng loại trừ.

Điều này khá khó hiểu. Ai đó có thể giải thích một cách đơn giản những gì ng-transclude dự định làm và nơi nó có thể được sử dụng?

angularjs angularjs-directive transclusion

— Mã thì thầm
nguồn

về cơ bản nó là một điểm đánh dấu cho bất cứ điều gì bạn đang chèn cho thẻ hoặc lệnh html cụ thể. sử dụng nó với một chỉ thị và bạn sẽ hiểu nó tốt hơn.

— za

Câu trả lời:

492

Transclude là một thiết lập để nói với góc cạnh để nắm bắt mọi thứ được đưa vào trong lệnh trong đánh dấu và sử dụng nó ở đâu đó _{(nơi thực sự ng-transcludelà tại)} trong mẫu của chỉ thị. Đọc thêm về điều này trong phần Tạo Chỉ thị Kết hợp các phần tử khác trên tài liệu của các chỉ thị .

Nếu bạn viết một lệnh tùy chỉnh, bạn sử dụng ng-transclude trong mẫu lệnh để đánh dấu điểm bạn muốn chèn nội dung của phần tử

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Nếu bạn đặt điều này trong đánh dấu của bạn

<hero name="superman">Stuff inside the custom directive</hero>

Nó sẽ hiển thị như sau:

Siêu nhân

Thứ bên trong chỉ thị tùy chỉnh

Ví dụ đầy đủ:

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

Hình dung:

— Ben Fischer
nguồn

Đây là mô tả tốt hơn nhiều, so với tài liệu chính thức của họ. Cái đó làm tôi đau đầu.

— Capaj

Câu trả lời chính xác! :) Liên kết bạn chia sẻ giúp tôi hiểu quá trình transclude.

— Paulo Oliveira

Angular nên sử dụng lời giải thích này thay vì các tài liệu mà họ hiện có.

— Jeremy W

@codeofnode dịch vụ biên dịch góc cạnh của nó, đây là mã có liên quan github.com/angular/angular.js/blob/ mẹo

— Ben Fischer

Câu trả lời của Stackoverflow là cách tốt nhất để nhấn mạnh các khái niệm góc

— sridhar ..

đó là một loại năng suất, mọi thứ từ phần tử.html () được hiển thị ở đó nhưng các thuộc tính chỉ thị vẫn hiển thị trong phạm vi nhất định.

— Sîrbu Nicolae-Cezar
nguồn

Câu trả lời hàng đầu tôi nghĩ là hoàn hảo, nhưng nếu bạn đến từ một nền tảng ruby thì tôi đồng ý, yieldcó vẻ như là một sự tương tự tốt.

— Apie

@Apie yea, tôi đến từ một nền ruby

— Sîrbu Nicolae-Cezar