สำหรับคำแนะนำพวกเขาสามารถเข้าใจได้ง่ายว่าเป็นฟังก์ชั่นที่ทำงานบนองค์ประกอบ DOM เฉพาะและคำแนะนำสามารถขยายฟังก์ชั่นขององค์ประกอบนี้
ก่อนอื่นมาดูตัวอย่างพารามิเตอร์ที่สมบูรณ์จากนั้นแนะนำฟังก์ชั่นและการใช้งานของแต่ละพารามิเตอร์โดยละเอียด:
Angular.module ('myapp', []). directive ('mydirective', ฟังก์ชัน () {return {จำกัด : สตริง, ลำดับความสำคัญ: จำนวน, เทอร์มินัล: บูลีน, เทมเพลต: สตริงหรือฟังก์ชันเทมเพลต: ฟังก์ชั่น ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attrs, transclude, otherinjectables) {... }, คอนโทรลเลอร์: สตริง, ต้องการ: สตริง, ลิงก์: ฟังก์ชั่น (ขอบเขต, iElement, iATtrs) {... }, คอมไพล์: // ส่งคืนฟังก์ชันหรือการเชื่อมต่อ โพสต์: ฟังก์ชั่น (ขอบเขต, iElement, IATTRS, คอนโทรลเลอร์) {... }} return function postlink (... ) {... }}};});จำกัด [สตริง]
จำกัด เป็นพารามิเตอร์เสริม ใช้เพื่อระบุในรูปแบบของคำสั่งที่ประกาศใน DOM ค่าเริ่มต้นคือ A นั่นคือมีการประกาศในรูปแบบของแอตทริบิวต์
ค่าเสริมมีดังนี้:
E (องค์ประกอบ)
<my-directive> </my-directive>
A (คุณสมบัติค่าเริ่มต้น)
<div my-directive = "expression"> </div>
C (ชื่อคลาส)
<div> </div>
m (หมายเหตุ)
<-Directive: การแสดงออกของฉัน->>
โดยทั่วไปเมื่อพิจารณาถึงความเข้ากันได้ของเบราว์เซอร์ขอแนะนำอย่างยิ่งให้ประกาศแอตทริบิวต์เริ่มต้นทันทีในรูปแบบของแอตทริบิวต์ วิธีการสุดท้ายไม่แนะนำให้ใช้ดัชนีที่ผ่านการคัดเลือกเมื่อไม่จำเป็น
รหัส:
Angular.Module ('App', []) .Directive ('myDirective', function () {return {จำกัด : 'e', เทมเพลต: '<a href = "http://www.baidu.com> baidu </a>'};}) htmlcode: <ผล:
ลำดับความสำคัญ [int]
คำแนะนำส่วนใหญ่ละเว้นพารามิเตอร์นี้และใช้ค่าเริ่มต้น 0 แต่บางสถานการณ์มีความสำคัญมากหรือจำเป็นต้องตั้งค่าลำดับความสำคัญสูง ตัวอย่างเช่น NGREPEAT ตั้งค่าพารามิเตอร์นี้เป็น 1,000 เพื่อให้มั่นใจได้ว่าในองค์ประกอบเดียวกันมันจะถูกเรียกก่อนคำแนะนำอื่น ๆ เสมอ
เทอร์มินัล [บูล]
พารามิเตอร์นี้ใช้เพื่อหยุดการเรียกใช้คำแนะนำในองค์ประกอบปัจจุบันที่มีลำดับความสำคัญต่ำกว่าคำสั่งนี้ อย่างไรก็ตามคำแนะนำที่มีลำดับความสำคัญเช่นเดียวกับคำสั่งปัจจุบันจะยังคงดำเนินการ
ตัวอย่างเช่น: NGIF มีลำดับความสำคัญสูงกว่า NGVIEW เล็กน้อย (เป็นพารามิเตอร์เทอร์มินัลจริง ๆ ) หากค่านิพจน์ของ NGIF เป็นจริง NGVIEW สามารถดำเนินการได้ตามปกติ แต่หากค่าของนิพจน์ NGIF เป็นเท็จ NGVIEW จะไม่ถูกดำเนินการเนื่องจากลำดับความสำคัญของ NGVIEW ต่ำ
เทมเพลต [สตริงหรือฟังก์ชั่น]
พารามิเตอร์เทมเพลตเป็นทางเลือกและต้องตั้งค่าเป็นหนึ่งในสองรูปแบบต่อไปนี้:
ข้อความ HTML ชิ้นหนึ่ง
ฟังก์ชั่นที่สามารถยอมรับพารามิเตอร์สองพารามิเตอร์คือพารามิเตอร์คือการถ่ายทอดสดและ tattrs และส่งคืนสตริงที่แสดงถึงเทมเพลต T ในการถ่ายทอดสดและ tattrs หมายถึงเทมเพลตเทียบกับอินสแตนซ์
ก่อนอื่นมาสาธิตการใช้งานครั้งที่สอง:
Angular.module ('App', []) .Directive ('myDirective', ฟังก์ชัน () {return {จำกัด : 'eac', เทมเพลต: ฟังก์ชั่น (elem, attr) {return "<a href = '" attr.value + ">" atttText + "</a>";HTMLCODE: (เอฟเฟกต์เหมือนกับข้างต้นจะไม่มีการสาธิต)
<my-directive value = "http://www.baidu.com" text = "baidu"> </my-directive> <div my- directive value = "http://www.baidu.com" text = "baidu"> </div>
templateurl [สตริงหรือฟังก์ชั่น]
TemplateUrl เป็นพารามิเตอร์เสริมซึ่งอาจเป็นประเภทต่อไปนี้:
สตริงที่แสดงเส้นทางของไฟล์ HTML ภายนอก
ฟังก์ชั่นที่สามารถยอมรับพารามิเตอร์สองพารามิเตอร์พารามิเตอร์คือการถ่ายทอดสดและ Tattrs และส่งคืนสตริงด้วยเส้นทางของไฟล์ HTML ภายนอก
ไม่ว่าจะด้วยวิธีใด URL ของเทมเพลตจะถูกส่งผ่านเลเยอร์ความปลอดภัยในตัวของ NG โดยเฉพาะ $ getTrustedResourceurl ซึ่งปกป้องเทมเพลตจากการถูกโหลดโดยแหล่งที่ไม่น่าเชื่อถือ โดยค่าเริ่มต้นเมื่อเรียกคำสั่งไฟล์เทมเพลต HTML จะถูกร้องขอผ่าน AJAX ในพื้นหลัง การโหลดเทมเพลตจำนวนมากจะทำให้แอปพลิเคชันไคลเอนต์ช้าลงอย่างรุนแรง เพื่อหลีกเลี่ยงเวลาแฝงแม่แบบ HTML สามารถแคชก่อนที่จะปรับใช้แอปพลิเคชัน
รหัส:
Angular.Module ('App', []) .Directive ('myDirective', ฟังก์ชั่น () {return {จำกัด : 'aec', templateurl: ฟังก์ชั่น (elem, attr) {return attr.value + ".html"; // แน่นอนว่าเราสามารถระบุเส้นทางโดยตรงแทนที่ [bool]
แทนที่เป็นพารามิเตอร์เสริม หากตั้งค่าพารามิเตอร์นี้ค่าจะต้องเป็นจริงเนื่องจากค่าเริ่มต้นเป็นเท็จ ค่าเริ่มต้นหมายความว่าเทมเพลตจะถูกแทรกลงในองค์ประกอบที่เรียกคำสั่งนี้ว่าเป็นองค์ประกอบของเด็ก
ตัวอย่างเช่นภายใต้ค่าเริ่มต้นของตัวอย่างข้างต้นรหัส HTML ที่สร้างขึ้นมีดังนี้:
<my-directive value = "http://www.baidu.com" text = "baidu"> <a href = "http://www.baidu.com"> baidu </a> </y-directive>
ถ้าแทนที่ = true ถูกตั้งค่า
<a href = "http://www.baidu.com" value = "http://www.baidu.com" text = "baidu"> baidu </a>
จากการสังเกตของฉันผลกระทบนี้จะแสดงผลจริงเมื่อ จำกัด = "E"
หลังจากแนะนำพารามิเตอร์การเรียนการสอนพื้นฐานแล้วพารามิเตอร์ขอบเขตที่สำคัญกว่านั้นจะเกี่ยวข้อง ...
พารามิเตอร์ขอบเขต [บูลหรือวัตถุ]
พารามิเตอร์ขอบเขตเป็นตัวเลือกและสามารถตั้งค่าเป็นจริงหรือวัตถุ ค่าเริ่มต้นเป็นเท็จ
หากคำสั่งหลายคำสั่งเกี่ยวกับขอบเขตการใช้ขอบเขตการแยกมีเพียงหนึ่งเดียวเท่านั้นที่สามารถมีผลได้ เฉพาะองค์ประกอบรูทในเทมเพลตคำสั่งเท่านั้นที่สามารถรับขอบเขตใหม่ได้ ดังนั้นขอบเขตจึงถูกตั้งค่าเป็นจริงโดยค่าเริ่มต้นสำหรับวัตถุเหล่านี้ ฟังก์ชั่นของ NG-controller ในตัวคือการสืบทอดจากขอบเขตหลักและสร้างขอบเขตเด็กใหม่ มันสร้างขอบเขตเด็กใหม่ที่สืบทอดมาจากขอบเขตหลัก การสืบทอดที่นี่จะไม่ได้รับการอธิบายในรายละเอียดและโดยทั่วไปจะเหมือนกับการสืบทอดในวัตถุที่มุ่งเน้น
ก่อนอื่นลองวิเคราะห์รหัส:
<div ng-app = "app" ng-init = "name = 'grandfather'"> <div ng-init = "name = 'father'"> รุ่นแรก: {{{name}} <div ng-init = "name = 'son' 'ng-controller =" someController " ชื่อ}} </div> </div> </div> </div> </div> </div>เราพบว่ารุ่นแรกเราเริ่มต้นชื่อเป็นพ่อ แต่รุ่นที่สองและรุ่นที่สามเป็นขอบเขตเดียวกันดังนั้นชื่อของพวกเขาจึงเป็นวัตถุดังนั้นผลของสิ่งนี้คือดังนี้:
รุ่นแรก: พ่อ
รุ่นที่สอง: หลานชาย
รุ่นที่สาม: หลานชาย
เรากำลังแก้ไขรหัสเพื่อแยกรุ่นที่สามจากนั้นตรวจสอบเอฟเฟกต์:
<div ng-app = "app" ng-init = "name = 'Grandfather'"> <div ng-init = "name = 'father'"> รุ่นแรก: {{name}} <div ng-init = "name = 'son'" ng-controller = "someController" ng-controller = "SecondController"> รุ่นที่สาม: {{name}} </div> </div> </div> </div> </div> </div> Angular.Module ('App', []) .Controller ('SomeController', ฟังก์ชั่น ($ scope) {}) .Controller ('SecondController', ฟังก์ชั่น ($ scope) {})ผลกระทบมีดังนี้:
รุ่นแรก: พ่อ
รุ่นที่สอง: ลูกชาย
รุ่นที่สาม: หลานชาย
หลังจากแก้ไขรหัสแล้วลองดูที่มรดก:
<div ng-app = "app" ng-init = "name = 'grandfather'"> <div> รุ่นแรก: {{ชื่อ}} <div ng-controller = "somecontroller"> รุ่นที่สอง: {{name}} <div ng-controller = "SecondController" </div> </div>ผลกระทบมีดังนี้:
รุ่นแรก: จูบของปู่
รุ่นที่สอง: จูบของปู่
รุ่นที่สาม: จูบของปู่
หากคุณต้องการสร้างคำสั่งที่สามารถสืบทอดขอบเขตจากต้นแบบภายนอกและตั้งค่าคุณสมบัติขอบเขตให้เป็นจริงมันเป็นเพียงการแยกที่สืบทอดได้นั่นคือมันไม่สามารถย้อนกลับส่งผลกระทบต่อขอบเขตของผู้ปกครองได้
ลองมาดูตัวอย่างอื่น:
Angular.module ('myapp', []) .Controller ('MainController', ฟังก์ชั่น ($ scope) {}). directive ('myDirective', ฟังก์ชั่น () {return {จำกัด : 'a', ขอบเขต: false, // สลับเป็น {}, การทดสอบที่แท้จริง ng-model = "myProperty"/> </div> '};});รหัส HTML:
<div ng-controller = 'MainController' ng-init = "myProperty = 'Hello World!'"> ภายนอก: {{myProperty}} <อินพุต ng-model = "myProperty"/>เมื่อเราเปลี่ยนค่าขอบเขตเราจะพบ
เท็จ: สืบทอด แต่ไม่ได้แยก
จริง: สืบทอดและแยก
{}: แยกและไม่ได้รับมรดก
สลับเสียง
Transclude เป็นพารามิเตอร์เสริม ค่าเริ่มต้นเป็นเท็จ การฝังมักจะใช้เพื่อสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้ตัวอย่างทั่วไปคือกล่องโต้ตอบโมดอลหรือแถบการนำทาง เราสามารถผ่านเทมเพลตทั้งหมดทั้งหมดรวมถึงคำแนะนำในนั้นลงในคำสั่งเดียวโดยฝังไว้ ด้านในของคำสั่งสามารถเข้าถึงขอบเขตของคำสั่งภายนอกและแม่แบบยังสามารถเข้าถึงวัตถุขอบเขตภายนอก เพื่อที่จะผ่านขอบเขตในค่าของพารามิเตอร์ขอบเขตจะต้องตั้งค่าให้แยกขอบเขตโดย {} หรือจริง หากไม่ได้ตั้งค่าพารามิเตอร์ขอบเขตขอบเขตภายในคำสั่งจะถูกตั้งค่าเป็นขอบเขตของเทมเพลตที่เข้ามา
ใช้ transclude: จริงเฉพาะในกรณีที่คุณต้องการสร้างคำสั่งที่สามารถมีเนื้อหาใด ๆ
มาดูสองตัวอย่าง - แถบการนำทาง:
<div side-box> <v> <a href = ""> กราฟิก </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> front-end </a>
jscode:
Angular.module ('myapp', []) .directive ('sidebox', ฟังก์ชั่น () {return {จำกัด : 'ea', ขอบเขต: {title: '@'}, แปล: จริง, เทมเพลต: '<div> <div> <h2> -รหัสนี้บอกให้คอมไพเลอร์ NG นำสิ่งที่ได้รับจากองค์ประกอบ DOM ซึ่งมันค้นพบคำสั่ง NG-Transclude
มาดูตัวอย่างจากเว็บไซต์อย่างเป็นทางการ:
Angular.module ('Docsisofnbindexample', []). controller ('คอนโทรลเลอร์', ['$ scope', '$ timeout', ฟังก์ชั่น ($ scope, $ หมดเวลา) {$ scope.name = 'tobias'; FALSE;}, 2000);my-dialog-close.html
my-dialog-close.html <div> <a href ng-click = "close ()"> × </a> <div ng-transclude> </div> </div>
index.html
<div ng-controller = "คอนโทรลเลอร์"> <my-dialog ng-hide = "dialogishidding" on-close = "hidedialog ()"> ตรวจสอบเนื้อหา {{name}}! </my-dialog> </div>หากคำสั่งใช้พารามิเตอร์ transclude คอนโทรลเลอร์ไม่สามารถตรวจสอบการเปลี่ยนแปลงในโมเดลข้อมูลได้ตามปกติ ขอแนะนำให้ใช้บริการ $ ดูในฟังก์ชั่นลิงค์
คอนโทรลเลอร์ [สตริงหรือฟังก์ชั่น]
พารามิเตอร์คอนโทรลเลอร์สามารถเป็นสตริงหรือฟังก์ชั่น เมื่อตั้งค่าเป็นสตริงตัวสร้างของคอนโทรลเลอร์ที่ลงทะเบียนในแอปพลิเคชันจะพบกับค่าของสตริงเป็นชื่อ
Angular.module ('myapp', []). directive ('mydirective', function () {จำกัด : 'A', คอนโทรลเลอร์: 'SomeController'})คอนโทรลเลอร์แบบอินไลน์สามารถกำหนดได้ผ่านตัวสร้างที่ไม่ระบุชื่อภายในคำสั่ง
Angular.module ('myapp', []). directive ('mydirective', function () {จำกัด : 'a', คอนโทรลเลอร์: ฟังก์ชั่น ($ scope, $ องค์ประกอบ, $ attrs, $ transclude) {// ตรรกะคอนโทรลเลอร์ถูกวางไว้ที่นี่}});เราสามารถฉีดบริการ NG ใด ๆ ที่สามารถฉีดเข้าไปในคอนโทรลเลอร์และเราสามารถใช้มันในคำแนะนำ นอกจากนี้ยังมีบริการพิเศษบางอย่างในคอนโทรลเลอร์ที่สามารถฉีดเข้าไปในคำแนะนำ บริการเหล่านี้รวมถึง:
1. $ ขอบเขต
ขอบเขตปัจจุบันที่เกี่ยวข้องกับองค์ประกอบคำสั่ง
2. $ องค์ประกอบ
องค์ประกอบที่สอดคล้องกับคำสั่งปัจจุบัน
3. $ attrs
วัตถุที่ประกอบด้วยแอตทริบิวต์ขององค์ประกอบปัจจุบัน
<div id = "adiv" class = "box"> </div> มีวัตถุแอตทริบิวต์ต่อไปนี้: {id: "adiv", คลาส: "box"}4. $ transclude
ฟังก์ชั่นการเชื่อมโยงแบบฝังจะถูกเตรียมไว้ด้วยขอบเขตการฝังที่สอดคล้องกัน ฟังก์ชั่นการเชื่อมโยง transclude เป็นฟังก์ชั่นที่ดำเนินการจริงกับองค์ประกอบโคลนและใช้งาน DOM
Angular.module ('myapp', []). directive ('mylink', function () {return {จำกัด : 'ea', transclude: จริง, คอนโทรลเลอร์: ฟังก์ชั่น ($ scope, $ element, $ attrs, $ transclude) {$ transclude A.Text (clone.Text ()); -HTML
<my-link value = "http://www.baidu.com"> baidu </my-link>
<div my-link value = "http://www.google.com"> Google </div>
ขอแนะนำให้ใช้ transcludefn เฉพาะในพารามิเตอร์คอมไพล์ ฟังก์ชั่นลิงค์สามารถแยกคำแนะนำจากกันและกันในขณะที่คอนโทรลเลอร์กำหนดพฤติกรรมที่นำกลับมาใช้ใหม่ได้ หากเราต้องการเปิดเผย API ของคำสั่งปัจจุบันไปยังคำแนะนำอื่น ๆ เราสามารถใช้พารามิเตอร์คอนโทรลเลอร์มิฉะนั้นเราสามารถใช้ลิงก์เพื่อสร้างการทำงานขององค์ประกอบคำสั่งปัจจุบัน (เช่นฟังก์ชั่นภายใน) หากเราใช้ขอบเขต. $ watch () หรือต้องการโต้ตอบกับองค์ประกอบ DOM แบบเรียลไทม์การใช้ลิงก์จะเป็นตัวเลือกที่ดีกว่า ด้วยการฝังขอบเขตที่สะท้อนโดยขอบเขตในคอนโทรลเลอร์อาจแตกต่างจากที่เราคาดไว้ ในกรณีนี้วัตถุ $ ขอบเขตไม่สามารถรับประกันได้ว่าจะได้รับการปรับปรุงตามปกติ เมื่อคุณต้องการโต้ตอบกับขอบเขตบนหน้าจอปัจจุบันคุณสามารถใช้พารามิเตอร์ขอบเขตที่ส่งผ่านไปยังฟังก์ชั่นลิงค์
คอนโทรลเลอร์ [สตริง]
พารามิเตอร์คอนโทรลเลอร์ถูกใช้เพื่อตั้งค่านามแฝงของคอนโทรลเลอร์เพื่อให้คอนโทรลเลอร์สามารถอ้างอิงได้ในมุมมองโดยไม่ต้องฉีดค่า $
<div ng-controller = "MainController เป็นหลัก"> <อินพุต type = "text" ng-model = "main.name"/> <span> {{main.name}} </span> </div>jscode:
Angular.Module ('myApp', []) .Controller ('MainController', function () {this.name = "Halower";});นามแฝงของคอนโทรลเลอร์ช่วยให้การกำหนดเส้นทางและคำแนะนำในการสร้างตัวควบคุมที่ไม่ระบุชื่อ ความสามารถนี้สามารถสร้างวัตถุแบบไดนามิกลงในตัวควบคุมและวัตถุนั้นแยกได้และทดสอบได้ง่าย
ต้องการ [สตริงหรือสตริง []]
จำเป็นต้องมีสตริงที่แสดงชื่อของคำสั่งอื่น ต้องการจะฉีดคอนโทรลเลอร์ลงในคำสั่งที่ระบุและทำหน้าที่เป็นพารามิเตอร์ที่สี่ของฟังก์ชันลิงก์ของคำสั่งปัจจุบัน ค่าขององค์ประกอบสตริงหรืออาร์เรย์คือชื่อคำสั่งที่จะใช้ในขอบเขตของคำสั่งปัจจุบัน ไม่ว่าในกรณีใดคอมไพเลอร์ NG จะอ้างถึงเทมเพลตของคำสั่งปัจจุบันเมื่อมองหาเครื่องย่อย
รวบรวม【วัตถุหรือฟังก์ชั่น】
ตัวเลือกคอมไพล์นั้นไม่ได้ใช้บ่อย แต่ใช้ฟังก์ชันลิงก์บ่อยครั้ง โดยพื้นฐานแล้วเมื่อเราตั้งค่าตัวเลือกลิงค์เราจะสร้างฟังก์ชั่นลิงก์ postlink () เพื่อให้ฟังก์ชั่น Compile () สามารถกำหนดฟังก์ชั่นลิงค์ได้ โดยปกติหากมีการตั้งค่าฟังก์ชั่นคอมไพล์นั่นหมายความว่าเราต้องการดำเนินการ DOM ก่อนที่จะมีการใส่คำแนะนำและข้อมูลเรียลไทม์ลงใน DOM มันปลอดภัยที่จะดำเนินการ DOM เช่นการเพิ่มและลบโหนดในฟังก์ชั่นนี้
ตัวเลือกการคอมไพล์และลิงค์นั้นไม่เหมือนกัน หากมีการตั้งค่าตัวเลือกทั้งสองนี้ในเวลาเดียวกันฟังก์ชั่นที่ส่งคืนโดยการรวบรวมจะถือเป็นฟังก์ชั่นลิงก์และตัวเลือกลิงค์จะถูกละเว้น
ฟังก์ชั่นที่รวบรวมมีหน้าที่ในการแปลงเทมเพลต DOM ฟังก์ชั่นลิงค์มีหน้าที่เชื่อมโยงขอบเขตและ DOM DOM สามารถดำเนินการด้วยตนเองก่อนที่ขอบเขตจะเชื่อมโยงกับ DOM ในทางปฏิบัติการดำเนินการประเภทนี้หายากมากเมื่อเขียนคำแนะนำที่กำหนดเอง แต่มีคำแนะนำในตัวหลายข้อที่ให้ฟังก์ชั่นดังกล่าว
การเชื่อมโยง
คอมไพล์: ฟังก์ชั่น (tele, tattrs, translatefn) {// todo: ฟังก์ชั่นการส่งคืน (ขอบเขต, ele, attrs) {// link function};ฟังก์ชั่นลิงค์เป็นทางเลือก หากมีการกำหนดฟังก์ชั่นที่คอมไพล์แล้วจะส่งคืนฟังก์ชั่นที่เชื่อมโยงดังนั้นเมื่อมีการกำหนดฟังก์ชั่นทั้งสองฟังก์ชั่นคอมไพล์โอเวอร์โหลดฟังก์ชั่นที่เชื่อมโยง หากคำแนะนำของเราง่ายและไม่ต้องการการตั้งค่าเพิ่มเติมเราสามารถส่งคืนฟังก์ชั่นจากฟังก์ชั่นโรงงาน (ฟังก์ชั่นการโทรกลับ) เพื่อแทนที่วัตถุ หากทำเสร็จแล้วฟังก์ชั่นนี้เป็นฟังก์ชันลิงก์
ngmodel
มันให้ API พื้นฐานมากขึ้นในการประมวลผลข้อมูลในคอนโทรลเลอร์ API นี้ใช้เพื่อจัดการการเชื่อมโยงข้อมูลการตรวจสอบการอัปเดต CSS และสิ่งอื่น ๆ ที่ไม่ได้ใช้งาน DOM คอนโทรลเลอร์ NGMODEL จะถูกฉีดเข้าไปในคำแนะนำพร้อมกับ NGModel ซึ่งมีวิธีการบางอย่าง ในการเข้าถึง NGModelController คุณต้องใช้การตั้งค่าที่ต้องการ
องค์ประกอบทั่วไปที่ใช้โดย NGModelController มีดังนี้:
1. เพื่อตั้งค่าค่ามุมมองในขอบเขตต้องเรียกฟังก์ชัน ngmodel. $ setViewValue ()
วิธี $ setViewValue () เหมาะสำหรับการฟังเหตุการณ์ที่กำหนดเองในคำสั่งที่กำหนดเอง (เช่นการใช้ปลั๊กอิน jQuery พร้อมฟังก์ชั่นการโทรกลับ) และเราต้องการตั้งค่า $ viewValue และดำเนินการ Digest Loops เมื่อเรียกกลับ
Angular.Module ('MyApp') .Directive ('myDirective', function () {return {ต้องการ: '? ngmodel', ลิงก์: ฟังก์ชั่น (ขอบเขต, elts, attrs, ngmodel) {ถ้า (ngmodel) return (callback ขอบเขต $ ใช้ (ฟังก์ชั่น () {ngmodel. $ setViewValue (วันที่);}); - - - - - - - - - - - - - - - - - - - - - -2. วิธีการ $ render สามารถกำหนดวิธีการแสดงผลเฉพาะของมุมมอง
3. คุณสมบัติ
1. $ viewValue
คุณสมบัติ $ viewValue ถือสตริงจริงที่จำเป็นเพื่ออัปเดตมุมมอง
2. $ modelValue
$ modelValue จัดขึ้นโดยรูปแบบข้อมูล $ modelValue และ $ viewValue อาจแตกต่างกันไปขึ้นอยู่กับว่า $ Parser Pipeline ทำงานอยู่หรือไม่
3. $ parsers
ค่าของ $ parsers เป็นอาร์เรย์ของฟังก์ชั่นที่ฟังก์ชั่นถูกเรียกโดยหนึ่งในรูปแบบของท่อ ngmodel ค่าที่อ่านจาก DOM จะถูกส่งผ่านไปยังฟังก์ชั่นใน $ parsers และดำเนินการโดย parser ตามลำดับ
4. $ formatters
ค่าของ $ formatters เป็นอาร์เรย์ของฟังก์ชั่นที่เรียกว่าหนึ่งในรูปแบบของไปป์ไลน์เมื่อค่าของโมเดลข้อมูลเปลี่ยนไป มันไม่มีผลกระทบต่อไปป์ไลน์ $ parser และใช้ในการจัดรูปแบบและแปลงค่าเพื่อแสดงในตัวควบคุมด้วยค่านี้
5. $ ViewChangelisteners
ค่าของ $ viewchangelisteners เป็นอาร์เรย์ของฟังก์ชั่นที่เรียกว่าหนึ่งในรูปแบบของท่อเมื่อค่าในมุมมองเปลี่ยน ด้วย $ viewchangelisteners พฤติกรรมที่คล้ายกันสามารถทำได้โดยไม่ต้องใช้ $ watch เนื่องจากค่าส่งคืนจะถูกละเว้นฟังก์ชั่นเหล่านี้ไม่จำเป็นต้องส่งคืนค่า
6. $ ข้อผิดพลาด
วัตถุ $ ข้อผิดพลาดเก็บชื่อตัวตรวจสอบที่ไม่ได้ผ่านการตรวจสอบและข้อมูลข้อผิดพลาดที่เกี่ยวข้อง
7. $ pristine
ค่าของ $ pristine คือบูลีนซึ่งสามารถบอกเราได้ว่าผู้ใช้ได้ปรับเปลี่ยนการควบคุมหรือไม่
8. $ สกปรก
ค่าของ $ Dirty เป็นสิ่งที่ตรงกันข้ามกับ $ pristine ซึ่งสามารถบอกเราได้ว่าผู้ใช้มีปฏิสัมพันธ์กับการควบคุมหรือไม่
9. $ ถูกต้อง
ค่า $ ที่ถูกต้องบอกเราว่ามีข้อผิดพลาดในการควบคุมปัจจุบันหรือไม่ ค่าเป็นเท็จเมื่อมีข้อผิดพลาดและค่าเป็นจริงเมื่อไม่มีข้อผิดพลาด
10. $ ไม่ถูกต้อง
ค่า $ ไม่ถูกต้องบอกเราว่ามีข้อผิดพลาดอย่างน้อยหนึ่งข้อในการควบคุมปัจจุบันและค่าของมันตรงกันข้ามกับ $ ถูกต้องหรือไม่
ข้างต้นคือการรวบรวมคำแนะนำและวัสดุความรู้เกี่ยวกับ AngularJs เราจะเพิ่มพวกเขาต่อไปในภายหลัง ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!