จะใช้คุณสมบัติ 'แทนที่' สำหรับคำสั่ง AngularJS ที่กำหนดเองได้อย่างไร?


92

เหตุใดจึงมีreplace=trueหรือreplace=falseไม่มีผลกระทบใด ๆ ในโค้ดด้านล่างนี้

เหตุใดจึงไม่แสดง "เนื้อหาที่มีอยู่บางส่วน" เมื่อแทนที่ = false

หรือพูดให้ถ่อมตัวมากขึ้นคุณช่วยอธิบายได้ไหมว่าreplace=true/falseคุณลักษณะในคำสั่งคืออะไรและจะใช้อย่างไร

ตัวอย่าง

JS / เชิงมุม:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

          })
          .directive('myDir', function() {
            return {
              restrict: 'E',
              replace: true,
              template: '<div>{{title}}</div>'
            };
      });
</script>

HTML:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

ดูใน Plunker ที่นี่:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview


2
@georgeawg ทำเครื่องหมายว่านี่ซ้ำกับคำถามอื่นที่ถาม / ตอบช้ากว่าคำถามนี้
Kaya Toast

คำตอบ:


189

เมื่อคุณได้replace: trueรับ DOM ชิ้นต่อไปนี้:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

ในขณะที่replace: falseคุณจะได้รับสิ่งนี้:

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

ดังนั้นreplaceคุณสมบัติในคำสั่งจะอ้างถึงว่าองค์ประกอบที่ใช้คำสั่ง ( <my-dir>ในกรณีนั้น) ควรยังคงอยู่ ( replace: false) และเทมเพลตของคำสั่งควรต่อท้ายเป็นรายการย่อยหรือไม่

หรือ

องค์ประกอบที่ใช้คำสั่งควรถูกแทนที่ ( replace: true) ด้วยเทมเพลตของคำสั่ง

ในทั้งสองกรณีองค์ประกอบของเด็ก (ซึ่งกำลังใช้คำสั่ง) จะหายไป หากคุณต้องการคงเนื้อหาดั้งเดิมขององค์ประกอบ / เด็กไว้คุณจะต้องถอดเนื้อหาออก คำสั่งต่อไปนี้จะทำ:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

ในกรณีที่ว่าถ้าในแม่แบบสั่งของคุณมีองค์ประกอบ (หรือองค์ประกอบ) ที่มีคุณลักษณะng-transcludeของมันเนื้อหาจะถูกแทนที่ด้วยองค์ประกอบของ (ซึ่งคำสั่งนี้จะถูกนำไปใช้) เนื้อหาต้นฉบับ

ดูตัวอย่างการแปลงhttp://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

ดูสิ่งนี้เพื่ออ่านเพิ่มเติมเกี่ยวกับการเปลี่ยน


6
นี่เป็นคำอธิบายที่เรียบง่ายอย่างน่าอัศจรรย์ และขอบคุณหลาย ๆ กลุ่มที่ให้ความกระจ่างในการเปลี่ยนผ่านด้วย
Kaya Toast

ที่สำคัญกว่านั้นทำไมไม่มีคำอธิบายที่docs.angularjs.org/guide/directiveและเหตุใดคำตอบนี้จึงไม่เชื่อมโยงไปยังคำตอบที่ชัดเจนในหัวข้อนี้
Trindaz

3
@Trindaz replaceเลิกใช้งานแล้วตั้งแต่ AngularJS v1.3 ( ลิงก์ )
Tonči D.

33

replace:true เลิกใช้แล้ว

จากเอกสาร:

replace ([DEPRECATED!] จะถูกลบออกในรุ่นหลักถัดไปนั่นคือ v2.0)

ระบุสิ่งที่เทมเพลตควรแทนที่ ค่าเริ่มfalseต้นเป็น

  • true - เทมเพลตจะแทนที่องค์ประกอบของคำสั่ง
  • false - แม่แบบจะแทนที่เนื้อหาขององค์ประกอบของคำสั่ง

- API คำสั่งที่ครอบคลุม AngularJS

จาก GitHub:

Caitp--เลิกใช้งานแล้วเนื่องจากมีปัญหาที่เป็นที่ทราบกันดีและไร้สาระมากมายreplace: trueซึ่งไม่สามารถแก้ไขได้อย่างสมเหตุสมผล หากคุณระมัดระวังและหลีกเลี่ยงปัญหาเหล่านี้คุณก็จะมีพลังมากขึ้น แต่เพื่อประโยชน์ของผู้ใช้ใหม่คุณสามารถบอกพวกเขาได้ง่ายกว่าว่า "สิ่งนี้จะทำให้คุณปวดหัวอย่าทำ"

- AngularJS ฉบับที่ 7636


อัปเดต

หมายเหตุ: replace: trueเลิกใช้งานแล้วและไม่แนะนำให้ใช้ส่วนใหญ่เกิดจากปัญหาที่ระบุไว้ที่นี่ มันถูกลบออกอย่างสมบูรณ์ใน Angular ใหม่

ปัญหาเกี่ยวกับการแทนที่: จริง

สำหรับข้อมูลเพิ่มเติมโปรดดู


2
ฉันอ่านมาตลอดว่าสิ่งนี้ควรได้รับการสนับสนุนอย่างไม่เป็นทางการใน Angular 2 แต่ฉันไม่สามารถหาวิธีเปิดใช้งานได้ ใครช่วยบอกทีว่าไวยากรณ์คืออะไร?
devios1

@devios ฉันต้องการสิ่งนั้นสำหรับส่วนประกอบ mdl ของฉัน แต่ปัจจุบันใช้remove-hostวิธีแก้ปัญหาstackoverflow.com/questions/34280475/…หากคุณพบเกี่ยวกับการเปิดใช้งานreplace: trueใน A2 โปรดแจ้งให้เราทราบ
kuncevic.dev
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.