คำสั่งฉันเข้าใจว่ามันเป็นวิธีสำหรับ AngularJs ในการจัดการองค์ประกอบ HTML
เนื่องจากขั้นตอนแรกในการเรียนรู้ AngularJS คือการเขียนคำแนะนำในตัว NG-APP ในตัวเพื่อระบุว่าโหนดเป็นโหนดรูทของแอปพลิเคชันจึงมีความคุ้นเคยอยู่แล้ว
บันทึกนี้เพียงบันทึกคำแนะนำในตัวก่อนใช้ก่อนแล้วพูดคุยเกี่ยวกับสิ่งที่น่าสนใจ
คำสั่งในตัว
คำสั่งในตัวทั้งหมดมีคำนำหน้า NG และไม่แนะนำให้ใช้คำนำหน้านี้สำหรับคำสั่งที่กำหนดเองเพื่อหลีกเลี่ยงความขัดแย้ง
เริ่มต้นด้วยคำแนะนำในตัวทั่วไป
ขั้นแรกให้แสดงรายการคำแนะนำในตัวคีย์และพูดคุยสั้น ๆ เกี่ยวกับปัญหาขอบเขต
โมเดล NG
คำอธิบายนี้ดูเหมือนจะไม่ถูกต้องเมื่อเชื่อมโยงการควบคุมแบบฟอร์มกับคุณสมบัติของขอบเขตปัจจุบัน
แต่ไม่ต้องกังวลเกี่ยวกับการเป็นคนที่เหนียวมันเข้าใจง่ายเมื่อใช้ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "text" ng-model = "somemodel.someproperty" /> <br>
{{somemodel.someProperty}}
ng-init
คำสั่งนี้เรียกว่าขอบเขตภายในเริ่มต้น
คำสั่งนี้มักจะปรากฏในแอปพลิเคชันขนาดเล็กเช่นการสาธิตหรืออะไรบางอย่าง ...
การคัดลอกรหัสมีดังนี้:
<div ng-init = "job = 'fighter'">
ฉันเป็น A/An {{Job}}
</div>
นอกจาก NG-init แล้วเรายังมีตัวเลือกที่ดีขึ้นและดีขึ้น
NG-APP
ทุกครั้งที่คุณใช้ AngularJs คำสั่งนี้แยกออกจากกันได้ โดยวิธีการรวม $ rootscope
ประกาศองค์ประกอบ NG-APP ให้เป็นจุดเริ่มต้นของ $ rootscope ซึ่งเป็นรากของห่วงโซ่ขอบเขตซึ่งมักจะประกาศใน <Html> ที่คุณเข้าใจ
กล่าวคือสามารถเข้าถึงได้โดยขอบเขตภายใต้รูท
อย่างไรก็ตามไม่แนะนำให้ใช้เงินมากเกินไป $ rootscope เพื่อหลีกเลี่ยงตัวแปรทั่วโลกที่บินไปทั่วท้องฟ้าทำให้ประสิทธิภาพไม่ดีและยากต่อการจัดการ
นี่คือตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<html ng-app = "myapp">
<body>
{{SomeProperty}}
</body>
<script>
var myapp = angular.module ('myapp', [])
.run (ฟังก์ชั่น ($ rootscope) {
$ ROOTSCOPE.SOMEPROPERTY = 'สวัสดีคอมพิวเตอร์';
-
</script>
</html>
ผู้ควบคุม
เราใช้คำสั่งนี้เพื่อติดตั้งคอนโทรลเลอร์บนองค์ประกอบ DOM
คอนโทรลเลอร์? แน่นอนมันเป็นการดีที่จะเข้าใจสิ่งนี้อย่างแท้จริงดังนั้นทำไมเราต้องมีคอนโทรลเลอร์?
โปรดจำไว้ว่าเมื่อ AngularJS 1.2.x คุณสามารถกำหนดคอนโทรลเลอร์เช่นนี้ ...
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น ohmycontroller ($ scope) {
-
-
วิธีนี้เป็นสิ่งต้องห้ามใน AngularJS 1.3.x เพราะวิธีนี้จะทำให้ตัวควบคุมบินไปทั่วท้องฟ้าและคุณไม่สามารถบอกความแตกต่างระหว่างระดับและทุกอย่างถูกแขวนไว้บน $ rootscope ...
NG-controller จะต้องมีนิพจน์เป็นพารามิเตอร์และนอกจากนี้ยังมีวิธีการและคุณสมบัติของขอบเขต $ ก่อนหน้านี้ได้รับการสืบทอดผ่าน $ SCOPE และ $ ROOTSCOPE ก็รวมอยู่ด้วย
ต่อไปนี้เป็นเพียงตัวอย่างง่ายๆบรรพบุรุษไม่สามารถเข้าถึงขอบเขตของเด็กได้
การคัดลอกรหัสมีดังนี้:
<div ng-controller = "AncestorController">
{{ancestorname}}
{{ildName}}
<div ng-controller = "ChildController">
{{ancestorname}}
{{ildName}}
</div>
</div>
<script>
var myapp = angular.module ('myapp', [])
.Controller ('ChildController', ฟังก์ชั่น ($ scope) {
$ scope.childName = 'ลูก';
-
.Controller ('AncestorController', ฟังก์ชั่น ($ scope) {
$ scope.ancestorname = 'บรรพบุรุษ';
-
</script>
ปัญหาขอบเขตมากกว่านั้น มาวางไว้ตอนนี้และดูคำแนะนำในตัวอื่น ๆ ต่อไป
รูปแบบ
ตอนแรกฉันไม่เข้าใจว่าทำไมมีคำสั่งแบบฟอร์มและแท็ก <form> รู้สึกพอ
การตรวจสอบแบบฟอร์มเป็นตัวอย่างมีส่วนหนึ่งของรหัสในบทความก่อนหน้า:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ส่ง" ng-disabled = "mainform. $ ไม่ถูกต้อง" />>
นั่นคือเมื่อสถานะของแบบฟอร์มไม่ถูกต้องปุ่มส่งจะถูกปิดใช้งาน
หากฉากนั้นซับซ้อนกว่านี้เล็กน้อยตัวอย่างเช่นมีรูปแบบเด็กหลายรูปแบบในรูปแบบผู้ปกครองและสามารถส่งแบบฟอร์มหลักได้เมื่อรูปแบบเด็ก 3 แบบผ่านการตรวจสอบ
อย่างไรก็ตาม <form> ไม่สามารถซ้อนกันได้
เมื่อพิจารณาถึงสถานการณ์นี้เราใช้คำสั่งแบบฟอร์ม NG เพื่อแก้ปัญหานี้
ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<form name = "mainform" novalidate>
<div ng-form = "form1">
ชื่อ: <อินพุต type = "text" ng-required = "true" ng-model = "name"/> <br>
หมายเลข id: <อินพุต type = "number" ng-minLength = "15" ng-maxLength = "18" ng-required = "true" ng-model = "idnum"/>>>>>>
</div>
<br>
<div ng-form = "form2">
ชื่อผู้พิทักษ์: <อินพุต type = "text" ng-required = "true" ng-model = "gname"/> <br>
หมายเลข ID Guardian: <อินพุต type = "number" ng-minLength = "15" ng-maxLength = "18" ng-required = "true" ng-model = "gidnum"/>> >>
</div>
<ปุ่ม ng-disabled = "form1. $ ไม่ถูกต้อง && form2. $ ไม่ถูกต้อง"> ส่งทั้งหมด </button>
</form>
ng-disabled
สำหรับคุณลักษณะเช่นนี้ที่มีผลตราบเท่าที่พวกเขาปรากฏเราสามารถทำให้มันมีประสิทธิภาพใน AngularJs โดยการคืนค่าจริง/เท็จโดยค่าการส่งคืนนิพจน์
ปิดการใช้งานฟิลด์อินพุตแบบฟอร์ม
การคัดลอกรหัสมีดังนี้:
<textarea ng-disabled = "1+1 == 2"> 1+1 =? </textarea>
ng-readonly
ตั้งค่าฟิลด์อินพุตแบบฟอร์มเป็นแบบอ่านอย่างเดียวโดยส่งคืนค่าจริง/เท็จโดยนิพจน์
ทำตัวอย่างและจะกลายเป็นอ่านอย่างเดียวหลังจาก 3 วินาที
การคัดลอกรหัสมีดังนี้:
<input type = "text" ng-readonly = "stoptheworld" value = "หยุดโลกหลังจาก 3S"/>
.run (ฟังก์ชั่น ($ rootscope, $ timeout) {
$ ROOTSCOPE.STOPTHEWORLD = FALSE;
$ timeout (function () {
$ ROOTSCOPE.STOPTHEWORLD = TRUE;
}, 3000)
-
ตรวจสอบแล้ว
นี่คือ <อินพุต type = "ช่องทำเครื่องหมาย" /> เช่น ...
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ช่องทำเครื่องหมาย" ng-checked = "someproperty" ng-init = "someproperty = true" ng-model = "someproperty">
เลือก NG
สำหรับใช้กับ <pontion> ใน <elect> ตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<label>
<อินพุต type = "ช่องทำเครื่องหมาย" ng-model = "Isfullstack">
ฉันเป็นวิศวกรสแต็คเต็มรูปแบบ
</lable>
<Select>
<POCIL> Front-End </petion>
<potion> back-end </petion>
<ตัวเลือก ng-selected = "iSfullStack"> สแต็คเต็ม !!! </opovie>
</เลือก>
ng-show/ng-hide
แสดง/ซ่อนองค์ประกอบ HTML ตามนิพจน์โปรดทราบว่ามันถูกซ่อนอยู่ไม่ได้ถูกลบออกจาก DOM ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
คุณมองไม่เห็นฉัน
</div>
การเปลี่ยนแปลง
มันไม่ใช่ onxxx ของ HTML หรืออะไรบางอย่าง แต่เป็น NG-XXX
ใช้ร่วมกับ NG-Model โดยใช้ NG-Change เป็นตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<input type = "text" ng-model = "calc.arg" ng-change = "calc.result = calc.arg*2" />
<code> {{calc.result}} </code>
หรือตัวอย่างเช่นตัวเลือก NG
-
ในความเป็นจริงนี่เป็นคำสั่ง บางทีมันอาจจะรู้สึกคล้ายกับ NG-bind แต่อาจเห็นได้เมื่อหน้าทำให้ช้าลงเล็กน้อย
นอกจากนี้ประสิทธิภาพของ {{}} น้อยกว่า NG-bind มาก แต่ก็สะดวกมากในการใช้งาน
อืม
พฤติกรรมของ NG-bind นั้นคล้ายคลึงกับ {{}} ยกเว้นว่าเราสามารถใช้คำสั่งนี้เพื่อหลีกเลี่ยง FOUC (แฟลชของเนื้อหาที่ไม่ได้รับ) นั่นคือการสั่นไหวที่เกิดจากการคลี่คลาย
นจีค๊อค
Ng-cloak ยังสามารถแก้ปัญหา fouc ให้เราได้ Ng-cloak ซ่อนองค์ประกอบภายในจนกว่าเส้นทางจะเรียกหน้าเว็บที่เกี่ยวข้อง
ng-if
หากนิพจน์ใน NG-IF เป็นเท็จองค์ประกอบที่เกี่ยวข้องจะถูกลบออกจาก DOM แทนที่จะถูกซ่อนอยู่ แต่เมื่อตรวจสอบองค์ประกอบคุณจะเห็นว่านิพจน์กลายเป็นความคิดเห็น
หากเฟสถูกซ่อนคุณสามารถใช้ ng-hide
การคัดลอกรหัสมีดังนี้:
<div ng-if = "1+1 === 3">
องค์ประกอบนี้ไม่สามารถตรวจสอบได้
</div>
<div ng-hhide = "1+1 == 2">
สามารถตรวจสอบได้
</div>
การสวิตช์
ไม่สำคัญว่าคุณจะใช้มันเพียงอย่างเดียวนี่คือตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<div ng-switch on = "1+1">
<p ng-switch-default> 0 </p>
<p ng-switch-when = "1"> 1 </p>
<p ng-switch-when = "2"> 2 </p>
<p ng-switch-when = "3"> 3 </p>
</div>
การทำซ้ำ
ฉันไม่เข้าใจว่ามันไม่ได้เรียกว่า iterate กล่าวโดยย่อคือการสำรวจการรวบรวมและสร้างอินสแตนซ์เทมเพลตสำหรับแต่ละองค์ประกอบ คุณลักษณะพิเศษบางอย่างสามารถใช้ในขอบเขตของแต่ละอินสแตนซ์ดังนี้:
การคัดลอกรหัสมีดังนี้:
$ ดัชนี
$ ก่อน
$ สุดท้าย
$ กลาง
สม่ำเสมอ
แปลก
โดยไม่ต้องอธิบายโดยเฉพาะมันเป็นเรื่องง่ายที่จะดูว่าสิ่งเหล่านี้มีไว้เพื่ออะไร นี่คือตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<ul>
<li ng-repeat = "ถ่านใน
[{'ตัวอักษร': 'k'},
{'ตัวอักษร': 'a'}
{'ตัวอักษร': 'V'}
{'ตัวอักษร': 'l'},
{'ตัวอักษร': 'e'},
{'ตัวอักษร': 'z'}] "ng-show =" $ even "> {{char.alphabet}} </li>
</ul>
ng-href
ตอนแรกฉันทำโมเดล NG ในฟิลด์ข้อความแล้วเขียนไว้ใน href เช่นนี้
อันที่จริงไม่มีความแตกต่างระหว่าง HREF และ NG-HREF ดังนั้นเราจึงสามารถลองสิ่งนี้ได้:
การคัดลอกรหัสมีดังนี้:
<ul ng-init = "myhref = '' '>
<li> <a ng-href = "{{myhref}}"> {{linktext}} </a> </li>
<li> <a href = "{{myhref}}"> คลิก แต่ไม่จำเป็นต้องเป็นที่อยู่ที่ถูกต้อง </a> </li>
</ul>
.run (ฟังก์ชั่น ($ rootscope, $ timeout) {
$ rootsCope.linkText = 'ยังไม่ได้โหลดคุณไม่สามารถคลิก';
$ timeout (function () {
$ ROOTSCOPE.linkText = 'โปรดคลิก'
$ rootscope.myhref = 'http://google.com';
}, 2000);
-
NG-SRC
เช่นเดียวกันนั่นคือทรัพยากรไม่ควรโหลดก่อนที่นิพจน์จะมีผล
ตัวอย่าง (PS: ภาพดี!):
การคัดลอกรหัสมีดังนี้:
<img ng-src = "{{imgsrc}}"/>>
.run (ฟังก์ชั่น ($ rootscope, $ timeout) {
$ timeout (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
-
อืม
เปลี่ยนรูปแบบคลาสแบบไดนามิกด้วยวัตถุในขอบเขตตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<style>
.ed {พื้นหลังสี: สีแดง;}
.blue {พื้นหลังสี: สีน้ำเงิน;}
</style>
<div ng-controller = "Curtimecontroller">
<button ng-click = "getCurrentSecond ()"> รับเวลา! </button>
<p ng-class = "{red: x%2 == 0, blue: x%2! = 0}"> หมายเลขคือ: {{x}} </p>
</div>
.Controller ('Curtimecontroller', ฟังก์ชั่น ($ scope) {
$ scope.getCurrentSecond = function () {
$ scope.x = วันที่ใหม่ (). getSeconds ();
-
-
ข้างต้นเป็นเนื้อหาทั้งหมดที่อธิบายไว้ในบทความนี้ฉันหวังว่าคุณจะชอบ