ng-transclude คืออะไร

266

ฉันได้เห็นคำถามจำนวนหนึ่งเกี่ยวกับ StackOverflow ที่พูดถึง ng-transclude แต่ไม่มีใครอธิบายในแง่ของคนธรรมดาว่ามันคืออะไร

คำอธิบายในเอกสารประกอบมีดังนี้:

คำสั่งที่ทำเครื่องหมายจุดแทรกสำหรับ DOM transcluded ของคำสั่งหลักที่ใกล้ที่สุดที่ใช้การรวมข้อมูล

นี่ค่อนข้างสับสน มีใครบ้างที่สามารถอธิบายในศัพท์ง่ายๆว่าตั้งใจจะทำอะไรและใช้ที่ใด

angularjs angularjs-directive transclusion

— รหัสกระซิบ
แหล่งที่มา

มันเป็นจุดทำเครื่องหมายสำหรับสิ่งที่คุณแทรกสำหรับแท็ก html หรือคำสั่งเฉพาะ ใช้กับคำสั่งและคุณจะเข้าใจได้ดีขึ้น

— Za

คำตอบ:

492

Transclude เป็นการตั้งค่าให้บอกมุมเพื่อจับทุกสิ่งที่ใส่ไว้ในคำสั่งในมาร์กอัปและใช้ที่ใดที่หนึ่ง_{(ที่จริง ๆ แล้วng-transcludeเป็นที่)}ในเทมเพลตของคำสั่ง อ่านข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้อยู่ภายใต้การสร้างคำสั่งที่ห่อองค์ประกอบอื่น ๆส่วนที่เกี่ยวกับเอกสารคำสั่ง

หากคุณเขียนคำสั่งที่กำหนดเองคุณใช้ ng-transclude ในเทมเพลตคำสั่งเพื่อทำเครื่องหมายจุดที่คุณต้องการแทรกเนื้อหาขององค์ประกอบ

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

ถ้าคุณใส่สิ่งนี้ในมาร์กอัปของคุณ

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

มันจะปรากฏขึ้นเช่น:

ยอดมนุษย์

เนื้อหาภายในคำสั่งที่กำหนดเอง

ตัวอย่างเต็มรูปแบบ:

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

เห็นภาพ:

— เบ็นฟิชเชอร์
แหล่งที่มา

นี่เป็นคำอธิบายที่ดีกว่าเอกสารทางการของพวกเขา นั่นทำให้ฉันปวดหัว

— Capaj

คำตอบที่ดี! :) transcludeลิงก์ที่คุณใช้ร่วมกันช่วยเหลือผมที่จะเข้าใจกระบวนการของ

— เปาโลโอลีฟราวีร่า

เชิงมุมควรใช้คำอธิบายนี้แทนเอกสารที่พวกเขามีอยู่ในปัจจุบัน

— Jeremy W

@ codeofnode บริการรวบรวมของเชิงมุมนี่คือรหัสที่เกี่ยวข้องgithub.com/angular/angular.js/blob/…

— Ben Fischer

คำตอบ Stackoverflow เป็นวิธีที่ดีที่สุดในการเน้นแนวคิดเชิงมุม

— sridhar ..

มันเป็นผลตอบแทนทุกอย่างจาก element.html () ได้รับการแสดงผลที่นั่น แต่แอตทริบิวต์คำสั่งยังคงมองเห็นได้ในขอบเขตที่แน่นอน

— Sîrbu Nicolae-Cezar
แหล่งที่มา

คำตอบที่ดีที่สุดที่ฉันคาดคิดนั้นสมบูรณ์แบบ แต่ถ้าคุณมาจากภูมิหลังของทับทิมฉันก็เห็นด้วยyieldดูเหมือนว่าเป็นการเปรียบเทียบที่ดี

— Apie

@Apie ใช่ฉันมาจากพื้นหลังทับทิม

— Sîrbu Nicolae-Cezar