การใช้สัญลักษณ์ '@', '&', '=' และ '>' ในการเชื่อมโยงขอบเขตคำสั่งที่กำหนดเอง: AngularJS

ฉันได้อ่านมากเกี่ยวกับการใช้สัญลักษณ์เหล่านี้ในการดำเนินการตามคำสั่งที่กำหนดเองใน AngularJS แต่แนวคิดยังไม่ชัดเจนสำหรับฉัน ฉันหมายความว่าอย่างไรถ้าฉันใช้ค่าขอบเขตหนึ่งค่าในคำสั่งที่กำหนดเอง

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

เรากำลังทำอะไรกับขอบเขตที่นี่?

ฉันไม่แน่ใจว่า"ขอบเขต: '>'"มีอยู่ในเอกสารอย่างเป็นทางการหรือไม่ มันถูกใช้ในโครงการของฉัน

แก้ไข-1

การใช้"ขอบเขต: '>'"เป็นปัญหาในโครงการของฉันและได้รับการแก้ไขแล้ว

ในคำสั่ง AngularJS ขอบเขตอนุญาตให้คุณเข้าถึงข้อมูลในแอตทริบิวต์ขององค์ประกอบที่มีการใช้คำสั่ง

นี่คือตัวอย่างที่ดีที่สุดด้วยตัวอย่าง:

<div my-customer name="Customer XYZ"></div>

และคำจำกัดความคำสั่ง:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

เมื่อscopeคุณสมบัติถูกใช้คำสั่งจะอยู่ในโหมดที่เรียกว่า "ขอบเขตขอบเขต" ซึ่งหมายความว่าไม่สามารถเข้าถึงขอบเขตของตัวควบคุมหลักได้โดยตรง

ในแง่ง่าย ๆ ความหมายของสัญลักษณ์ที่มีผลผูกพันคือ:

someObject: '=' (การรวมข้อมูลสองทาง)

someString: '@'(ผ่านโดยตรงหรือผ่านการแก้ไขด้วยเครื่องหมายวงเล็บปีกกาคู่{{}})

someExpression: '&'(เช่นhideDialog())

ข้อมูลนี้มีอยู่ในหน้าเอกสารกำกับของ AngularJSแม้ว่าจะค่อนข้างกระจายไปทั่วหน้า

สัญลักษณ์>ไม่ได้เป็นส่วนหนึ่งของไวยากรณ์

อย่างไรก็ตาม<มีอยู่เป็นส่วนหนึ่งของการโยงคอมโพเนนต์ AngularJSและหมายถึงการรวมทางเดียว

> ไม่ได้อยู่ในเอกสาร

< สำหรับการเชื่อมโยงทางเดียว

@การผูกคือการผ่านสตริง สตริงเหล่านี้รองรับการ{{}}แสดงออกสำหรับค่าที่ถูกสอดแทรก

=binding คือการผูกโมเดลสองทาง โมเดลในขอบเขตพาเรนต์เชื่อมโยงกับโมเดลในขอบเขตแยกของ directive

& การผูกคือการส่งวิธีการในขอบเขตของคำสั่งของคุณเพื่อให้สามารถเรียกได้ภายในคำสั่งของคุณ

เมื่อเราตั้งค่าขอบเขต: เป็นจริงในคำสั่ง Angular js จะสร้างขอบเขตใหม่สำหรับคำสั่งนั้น นั่นหมายถึงการเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นกับขอบเขตคำสั่งจะไม่สะท้อนกลับในตัวควบคุมหลัก

< การเชื่อมโยงทางเดียว

= ผูกพันสองทาง

& ฟังก์ชั่นที่มีผลผูกพัน

@ ผ่านสตริงเท่านั้น

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

1. ข้อมูลสามารถส่งผ่านเป็นสตริงโดยใช้@สตริงตัวอักษรส่งค่าสตริงการรวมทางเดียว
2. ข้อมูลสามารถส่งผ่านเป็นวัตถุโดยใช้=ตัวอักษรสตริงวัตถุผ่านมีผลผูกพัน 2 วิธี
3. ข้อมูลสามารถส่งผ่านเป็นฟังก์ชั่น&ตัวอักษรสตริงเรียกฟังก์ชั่นภายนอกสามารถส่งผ่านข้อมูลจากคำสั่งไปยังตัวควบคุม

เอกสาร AngularJS ในคำสั่งเป็นลายลักษณ์อักษรสวยดีสำหรับสิ่งที่หมายถึงสัญลักษณ์

เพื่อความชัดเจนคุณไม่สามารถทำได้

scope: '@'

ในคำนิยามคำสั่ง คุณต้องมีคุณสมบัติที่การผูกเหล่านั้นใช้เช่นเดียวกับใน:

scope: {
    myProperty: '@'
}

ฉันขอแนะนำให้คุณอ่านเอกสารและบทแนะนำในเว็บไซต์ มีข้อมูลมากมายที่คุณต้องรู้เกี่ยวกับขอบเขตที่แยกได้และหัวข้ออื่น ๆ

นี่คือคำพูดโดยตรงจากหน้าลิงค์ด้านบนเกี่ยวกับค่าของscope:

คุณสมบัติขอบเขตสามารถเป็นจริงวัตถุหรือค่าเท็จ:

• falsy : จะไม่มีการสร้างขอบเขตสำหรับคำสั่ง คำสั่งจะใช้ขอบเขตของผู้ปกครอง

• true: ขอบเขตลูกใหม่ที่สืบทอดจากต้นแบบจะถูกสร้างขึ้นสำหรับองค์ประกอบของคำสั่ง หากคำสั่งหลายคำสั่งในองค์ประกอบเดียวกันร้องขอขอบเขตใหม่จะมีการสร้างขอบเขตใหม่เพียงขอบเขตเดียว กฎขอบเขตใหม่ใช้ไม่ได้กับรูทของเทมเพลตเนื่องจากรูทของเทมเพลตจะได้รับขอบเขตใหม่เสมอ

• {...} (แฮชของวัตถุ) : ขอบเขต "แยก" ใหม่ถูกสร้างขึ้นสำหรับองค์ประกอบของคำสั่ง ขอบเขต 'แยก' แตกต่างจากขอบเขตปกติที่ไม่ได้รับมรดกจากขอบเขตแม่ สิ่งนี้มีประโยชน์เมื่อสร้างส่วนประกอบที่ใช้ซ้ำได้ซึ่งไม่ควรอ่านหรือแก้ไขข้อมูลในขอบเขตพาเรนต์โดยไม่ตั้งใจ

^{สืบค้น 2017-02-13 จากhttps://code.angularjs.org/1.4.11/docs/api/ng/service/ $ รวบรวม # -scope-, ใบอนุญาตCC-by-SA 3.0}

ฉันมีปัญหาในการผูกค่ากับสัญลักษณ์ใด ๆ ใน AngularJS 1.6 ฉันไม่ได้รับค่าใด ๆ เลยเพียงอย่างเดียวundefinedแม้ว่าฉันจะทำแบบเดียวกันกับการผูกอื่น ๆ ในไฟล์เดียวกับที่ใช้งานได้

ปัญหาคือ: ชื่อตัวแปรของฉันมีขีดล่าง

สิ่งนี้ล้มเหลว:

bindings: { import_nr: '='}

งานนี้:

bindings: { importnr: '='}

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