เมื่อใดจึงควรใช้องค์ประกอบ 'จริง' และยอดเยี่ยม transclude ในเชิงมุม

ฉันควรใช้transclude: 'true'เมื่อใดและเมื่อtransclude: 'element'ใด ฉันไม่สามารถหาอะไรเจอtransclude: 'element'ในเอกสารเชิงมุมพวกเขาค่อนข้างสับสน

ฉันจะมีความสุขถ้าใครสามารถอธิบายสิ่งนี้ในภาษาที่เรียบง่าย ประโยชน์ของแต่ละตัวเลือกคืออะไร ความแตกต่างที่แท้จริงระหว่างพวกเขาคืออะไร?

นี่คือสิ่งที่ฉันได้พบ:

transclude: true

ภายในฟังก์ชั่นการคอมไพล์คุณสามารถจัดการ DOM ด้วยความช่วยเหลือของ transclude ฟังก์ชั่นการเชื่อมโยงหรือคุณสามารถแทรก DOM transcluded ในเทมเพลตโดยใช้คำสั่ง ngTransclude บนแท็ก HTML ใด ๆ

และ

transclude: ‘element’

สิ่งนี้รวมองค์ประกอบทั้งหมดและฟังก์ชันเชื่อมโยง transclude ถูกนำมาใช้ในฟังก์ชั่นการคอมไพล์ คุณไม่สามารถเข้าถึงขอบเขตได้ที่นี่เนื่องจากยังไม่ได้สร้างขอบเขต ฟังก์ชั่นการคอมไพล์สร้างฟังก์ชั่นการเชื่อมโยงสำหรับคำสั่งที่มีการเข้าถึงขอบเขตและ transcludeFn ช่วยให้คุณสัมผัสองค์ประกอบโคลน (ซึ่งถูก transcluded) สำหรับการจัดการ DOM หรือใช้ข้อมูลที่ถูกผูกไว้กับขอบเขตในมัน สำหรับข้อมูลของคุณจะใช้ใน ng-repeat และ ng-switch

จากAngularJS เอกสารเกี่ยวกับคำสั่ง :

transclude- รวบรวมเนื้อหาขององค์ประกอบและทำให้พร้อมใช้งานสำหรับคำสั่ง โดยทั่วไปใช้กับ ngTransclude ข้อดีของการถ่ายโอนข้อมูลคือฟังก์ชั่นการเชื่อมโยงได้รับฟังก์ชั่นการถ่ายโอนข้อมูลซึ่งถูกผูกไว้ล่วงหน้ากับขอบเขตที่ถูกต้อง ในการตั้งค่าทั่วไปวิดเจ็ตจะสร้างขอบเขตไอโซเลต แต่การแปลงไม่ใช่ไม่ใช่เด็ก แต่เป็นพี่น้องของขอบเขตไอโซเลท สิ่งนี้ทำให้เป็นไปได้ที่วิดเจ็ตจะมีสถานะส่วนตัวและการรวมที่ถูกผูกไว้กับขอบเขตพาเรนต์ (pre-isolate)

true - ไม่รวมเนื้อหาของคำสั่ง

'element' - รวมองค์ประกอบทั้งหมดรวมถึงคำสั่งที่กำหนดไว้ที่ลำดับความสำคัญต่ำกว่า

transclude: จริง

สมมติว่าคุณมีคำสั่งที่เรียกว่า my-transclude-trueประกาศด้วยtransclude: trueสิ่งนี้:

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

หลังจากรวบรวมและก่อนเชื่อมโยงสิ่งนี้จะกลายเป็น:

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

เนื้อหา (เด็ก) ของmy-transclude-trueซึ่งจะ<span>{{ something }}</span> {{...ถูกเรียกใช้และพร้อมที่จะสั่ง

transclude: 'องค์ประกอบ'

หากคุณมีคำสั่งที่my-transclude-elementประกาศtransclude: 'element'ว่ามีลักษณะเช่นนี้:

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

หลังจากรวบรวมและก่อนเชื่อมโยงสิ่งนี้จะกลายเป็น:

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

ที่นี่ องค์ประกอบทั้งหมดรวมทั้งลูก ๆ ของมันจะถูกแปลงและทำให้พร้อมใช้งานสำหรับคำสั่ง

จะเกิดอะไรขึ้นหลังจากเชื่อมโยง

ขึ้นอยู่กับคำสั่งของคุณในการทำสิ่งที่ต้องทำกับฟังก์ชั่น transclude ngRepeatใช้transclude: 'element'เพื่อให้มันสามารถทำซ้ำองค์ประกอบทั้งหมดและลูกของมันเมื่อขอบเขตการเปลี่ยนแปลง อย่างไรก็ตามหากคุณต้องการแทนที่แท็กและต้องการเก็บเนื้อหาไว้คุณสามารถใช้transclude: trueกับngTranscludeคำสั่งที่ทำเพื่อคุณ

เมื่อตั้งค่าเป็นจริงคำสั่งจะลบเนื้อหาต้นฉบับ แต่ทำให้พร้อมสำหรับการแทรกซ้ำภายในแม่แบบของคุณผ่านคำสั่งที่เรียกว่า ng-transclude

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


<div directive-name>world</div>

เบราว์เซอร์แสดงผล:“ สวัสดีมีโลกนี้”

วิธีคิดที่ดีที่สุดเกี่ยวกับการแปลงเป็นกรอบรูปกรอบรูปมีการออกแบบของตัวเองและมีพื้นที่สำหรับเพิ่มรูปภาพเราสามารถตัดสินใจได้ว่ารูปภาพจะเข้าไปด้านในของมัน

เมื่อพูดถึงเชิงมุมเรามีตัวควบคุมบางชนิดที่มีขอบเขตและภายในนั้นเราจะวางคำสั่งที่รองรับการถ่ายโอน คำสั่งนี้จะมีจอแสดงผลและฟังก์ชันการทำงานเป็นของตัวเอง ในคำสั่งที่ไม่รวมอยู่ในเนื้อหาคำสั่งจะถูกตัดสินโดยคำสั่งของตัวเอง แต่ด้วยการตีความเช่นเดียวกับกรอบรูปเราสามารถตัดสินใจได้ว่าอะไรจะอยู่ในคำสั่ง

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


    }

});

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

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

โทรสั่ง

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

ตัวอย่าง