Directive แยกขอบเขตด้วยขอบเขต ng-repeat ใน AngularJS

ฉันมีคำสั่งที่มีขอบเขตแยก (เพื่อให้ฉันสามารถใช้คำสั่งซ้ำในที่อื่น ๆ ได้) และเมื่อฉันใช้คำสั่งนี้กับ an ng-repeatมันก็ไม่ทำงาน

ฉันได้อ่านเอกสารประกอบและคำตอบของ Stack Overflow ทั้งหมดในหัวข้อนี้และเข้าใจปัญหา ฉันเชื่อว่าฉันได้หลีกเลี่ยง gotcha ปกติทั้งหมด

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

ฉันยังได้อ่านว่าเมื่อมีคำสั่งหลายคำสั่งในองค์ประกอบหนึ่ง ๆ จะมีการสร้างขอบเขตเดียว และpriorityสามารถตั้งค่าa ในแต่ละคำสั่งเพื่อกำหนดลำดับที่จะนำคำสั่งไปใช้ คำสั่งจะเรียงลำดับตามลำดับความสำคัญจากนั้นจึงเรียกฟังก์ชันคอมไพล์ (ค้นหาลำดับความสำคัญของคำที่http://docs.angularjs.org/guide/directive )

ดังนั้นฉันหวังว่าฉันจะสามารถใช้ลำดับความสำคัญเพื่อให้แน่ใจว่าคำสั่งของฉันทำงานก่อนและจบลงด้วยการสร้างขอบเขตแยกและเมื่อng-repeatรันมันจะใช้ขอบเขตแยกซ้ำแทนการสร้างขอบเขตที่สืบทอดต้นแบบมาจากขอบเขตหลัก เอกสารระบุว่าที่วิ่งสั่งที่ระดับความสำคัญng-repeat 1000ไม่ชัดเจนว่า1เป็นระดับความสำคัญสูงกว่าหรือระดับความสำคัญต่ำกว่า เมื่อผมใช้ระดับความสำคัญในคำสั่งของฉันมันไม่ได้สร้างความแตกต่างดังนั้นฉันพยายาม1 2000แต่นั่นทำให้สิ่งต่าง ๆ แย่ลง: การผูกสองทางundefinedของฉันกลายเป็นและคำสั่งของฉันไม่แสดงอะไรเลย

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

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

แต่คำถามที่ฉันมีคือ:

• ฉันจะป้องกันไม่ให้ng-repeatสร้างขอบเขตที่สืบทอดต้นแบบจากขอบเขตหลักและใช้ขอบเขตแยกของคำสั่งแทนได้อย่างไร
• เหตุใดระดับความสำคัญ2000ในคำสั่งของฉันจึงไม่ทำงาน
• การใช้ Batarang สามารถทราบได้หรือไม่ว่าใช้ขอบเขตประเภทใด?

เอาล่ะจากความคิดเห็นมากมายด้านบนฉันได้ค้นพบความสับสน ก่อนอื่นให้ความกระจ่างสองสามประเด็น:

• ngRepeat ไม่มีผลกับขอบเขตการแยกที่คุณเลือก
• พารามิเตอร์ที่ส่งผ่านไปยัง ngRepeat เพื่อใช้กับแอตทริบิวต์ของคำสั่งของคุณใช้ขอบเขตที่สืบทอดมาจากต้นแบบ
• เหตุผลที่คำสั่งของคุณใช้ไม่ได้นั้นไม่เกี่ยวข้องกับขอบเขตการแยก

นี่คือตัวอย่างของรหัสเดียวกัน แต่ลบคำสั่ง:

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

นี่คือJSFiddle ที่แสดงให้เห็นว่ามันใช้ไม่ได้ คุณจะได้ผลลัพธ์เดียวกันกับในคำสั่งของคุณ

ทำไมใช้ไม่ได้ เนื่องจากขอบเขตใน AngularJS ใช้การสืบทอดต้นแบบ ค่าselectedขอบเขตผู้ปกครองของคุณเป็นแบบดั้งเดิม ใน JavaScript หมายความว่าจะถูกเขียนทับเมื่อเด็กกำหนดค่าเดียวกัน มีกฎทองใน AngularJS ขอบเขตคือค่ารูปแบบควรเสมอมี.ในพวกเขา นั่นคือพวกเขาไม่ควรเป็นของดั้งเดิม ดูคำตอบ SO นี้สำหรับข้อมูลเพิ่มเติม

นี่คือภาพของขอบเขตในตอนแรก

หลังจากคลิกรายการแรกขอบเขตจะมีลักษณะดังนี้:

สังเกตว่าselectedคุณสมบัติใหม่ถูกสร้างขึ้นบนขอบเขต ngRepeat ขอบเขตของคอนโทรลเลอร์ 003 ไม่ได้รับการเปลี่ยนแปลง

คุณอาจเดาได้ว่าจะเกิดอะไรขึ้นเมื่อเราคลิกที่รายการที่สอง:

ดังนั้นปัญหาของคุณไม่ได้เกิดจาก ngRepeat เลย แต่เกิดจากการฝ่าฝืนกฎทองใน AngularJS วิธีแก้ไขก็แค่ใช้คุณสมบัติของวัตถุ:

$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

นี่คือJSFiddle ที่สองที่แสดงผลงานนี้ด้วย

นี่คือลักษณะของขอบเขตในตอนแรก:

หลังจากคลิกรายการแรก:

ที่นี่ขอบเขตของคอนโทรลเลอร์จะได้รับผลกระทบตามต้องการ

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

ขอบเขตเริ่มแรก:

ขอบเขตหลังจากคลิกที่รายการแรก:

สรุป: อีกครั้งปัญหาของคุณไม่ได้อยู่ที่ขอบเขตการแยกและไม่ได้ขึ้นอยู่กับวิธีการทำงานของ ngRepeat ปัญหาของคุณคือคุณทำผิดกฎซึ่งเป็นที่ทราบกันดีว่านำไปสู่ปัญหานี้ โมเดลใน AngularJS ควรมีนามสกุล..

โดยไม่พยายามหลีกเลี่ยงการตอบคำถามของคุณโดยตรงให้ดูที่ซอต่อไปนี้:

http://jsfiddle.net/dVPLM/

ประเด็นสำคัญคือแทนที่จะพยายามต่อสู้และเปลี่ยนแปลงพฤติกรรมเดิม ๆ ของ Angular คุณสามารถจัดโครงสร้างคำสั่งของคุณให้ทำงานได้ng-repeatแทนที่จะพยายามแทนที่มัน

ในเทมเพลตของคุณ:

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

ในคำสั่งของคุณ:

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

เพื่อตอบคำถามของคุณ:

• ng-repeat จะสร้างขอบเขตคุณไม่ควรพยายามเปลี่ยนแปลงสิ่งนี้
• ลำดับความสำคัญในคำสั่งไม่ได้เป็นเพียงแค่คำสั่งการดำเนินการเท่านั้นดู: AngularJS: คอมไพเลอร์ HTML จัดเรียงลำดับการคอมไพล์อย่างไร
• ใน Batarang หากคุณตรวจสอบแท็บประสิทธิภาพคุณจะเห็นนิพจน์ที่ผูกไว้สำหรับแต่ละขอบเขตและตรวจสอบว่าตรงกับความคาดหวังของคุณหรือไม่