บทช่วยสอนนี้ใช้เวอร์ชัน AngularJS: 1.5.3
Angularjs github: https://github.com/angular/angular.js/
Angularjs ดาวน์โหลดที่อยู่: https://angularjs.org/
บทคัดย่อ: คำสั่ง (คำแนะนำ) ผู้เขียนเชื่อว่ามันเป็นหนึ่งในฟังก์ชั่นที่ทรงพลังและมีประโยชน์ของ AngularJ มันเทียบเท่ากับการเขียนองค์ประกอบ DOM ที่กำหนดเองหรือแอตทริบิวต์คลาสหรือแอตทริบิวต์ ATTT สำหรับเราและไม่ใช่แค่นั้นคุณยังสามารถจัดการขอบเขตการผูกเหตุการณ์เหตุการณ์การเปลี่ยนแปลง ฯลฯ บนพื้นฐานของมัน ผ่านคำสั่งนี้เราสามารถห่อหุ้มคำแนะนำสาธารณะมากมายเช่นคำแนะนำการเพจ, คำแนะนำการเสร็จสิ้นอัตโนมัติ ฯลฯ จากนั้นคุณจะต้องเขียนโค้ดบรรทัดเดียวในหน้า HTML เพื่อให้ได้ฟังก์ชั่นที่ทรงพลังมากมาย โดยทั่วไปแล้วคำสั่งจำเป็นต้องใช้เพื่อให้มีสถานการณ์ดังต่อไปนี้:
1. ทำให้ HTML ของคุณมีความหมายมากขึ้นและคุณไม่จำเป็นต้องศึกษารหัสและตรรกะในเชิงลึกเพื่อทราบตรรกะทั่วไปของหน้า
2. บทคัดย่อองค์ประกอบที่กำหนดเองและนำกลับมาใช้ใหม่ที่อื่น
1. คำจำกัดความของคำสั่งและวิธีการใช้งาน
คำจำกัดความคำสั่ง AngularJS มีดังนี้
Angular.Module ("App", []). Directive ("DirectIvename", function () {return {// define โดยการตั้งค่ารายการ};})คำสั่งสามารถวางไว้ในชื่อองค์ประกอบแอตทริบิวต์คลาสและความคิดเห็น ต่อไปนี้เป็นวิธีที่เทียบเท่าในการอ้างถึง mydir คำสั่ง (แต่คำสั่งมากมาย จำกัด เฉพาะการใช้ "คุณสมบัติ")
<span <span style = "font-family: Arial, helvetica, sans-serif;"> directive-name </span> <span style = "font-family: arial, helvetica, sans-serif;"> = "exp"> </span> // sans-serif; "> directive-name </span>> </<span style =" font-family: arial, helvetica, sans-serif; "> directive-name </span >> </<span style =" font-family: arial, helvetica, sans-serif; " sans-serif; "> directive-name </span >> // องค์ประกอบ <!-คำสั่ง: <span style =" font-family: Arial, helvetica, sans-serif; "> directive-name </span> <span style =" font-family: Arial, helvetica, sans-serif;
ตัวอย่างต่อไปนี้:
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " <hello-world> </hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {จำกัด : 'e', เทมเพลต: '<div> สวัสดีฉันเป็น Lin Bingwen ~~~ </div>' แทนที่: true};}); </script> </html>ผลลัพธ์:
ด้านล่างเป็นเวอร์ชันรายละเอียดคำสั่ง
var mymodule = angular.module (... ); myModule.directive ('directiveName', ฟังก์ชั่นโรงงาน (injectables) {var directivedEfinitionObject = {ลำดับความสำคัญ: 0, เทมเพลต: '<div> </div>', templateurl: 'directive.html', แทนที่: เท็จ prelink (ขอบเขต, iElement, iATTRS, คอนโทรลเลอร์) {... }, โพสต์: ฟังก์ชั่น postlink (ขอบเขต, iElement, IATTRS, คอนโทรลเลอร์) {... }}}, ลิงก์: ฟังก์ชั่น postlink2. การตีความเนื้อหาคำสั่ง Directive
คุณจะเห็นว่ามี 8 เนื้อหา
1. กำหนด
(สตริง) พารามิเตอร์ทางเลือกระบุรูปแบบของคำสั่งที่ถูกประกาศใน DOM; ค่าคือ: E (องค์ประกอบ), A (แอตทริบิวต์), C (คลาส), M (สัญกรณ์) และค่าเริ่มต้นคือ A; แน่นอนว่าสองคนสามารถใช้ร่วมกันได้เช่น EA การเป็นตัวแทนอาจเป็นองค์ประกอบหรือแอตทริบิวต์
[HTML] ดูชิ้นส่วนมุมมองการคัดลอกการคัดลอกแบบธรรมดาบนรหัสที่ได้มาจากส่วนรหัสของฉัน
E (องค์ประกอบ): <Tirecidename> </irectivename>
a (คุณสมบัติ): <div directiveMame = 'expression'> </div>
C (คลาส): <div class = 'directiveMame'> </div>
M (หมายเหตุ): <-Directive: Expression DirectiveName->
โดยทั่วไปแล้ว E/A/C จะใช้บ่อยขึ้น
2. ความสำคัญ
(หมายเลข), พารามิเตอร์ทางเลือกระบุลำดับความสำคัญของคำสั่ง หากมีคำแนะนำหลายคำใน DOM เดียวลำดับความสำคัญที่สูงกว่าจะถูกดำเนินการก่อน
3.minal
(บูลีน) พารามิเตอร์เสริมสามารถตั้งค่าเป็นจริงหรือเท็จ หากตั้งค่าเป็นจริงคำแนะนำอื่น ๆ ที่มีลำดับความสำคัญต่ำกว่าคำสั่งนี้จะไม่ถูกต้องและจะไม่ถูกเรียก (คำสั่งที่มีลำดับความสำคัญเดียวกันจะยังคงดำเนินการอยู่)
4.Template (สตริงหรือฟังก์ชั่น) พารามิเตอร์ตัวเลือกซึ่งสามารถ:
(1) ข้อความ HTML ชิ้นหนึ่ง
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " <hello-world> </hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {จำกัด : 'e', แม่แบบ: '<div> <h1> สวัสดีฉันเป็น Lin Bingwen ~~~ </h1> </div>' แทนที่: true};}); </script> </html>(2) ฟังก์ชั่นสามารถยอมรับพารามิเตอร์สองพารามิเตอร์และ tattrs
โดยที่การถ่ายโอนข้อมูลหมายถึงองค์ประกอบที่ใช้คำสั่งนี้และ Tattrs เป็นแอตทริบิวต์ของอินสแตนซ์ซึ่งเป็นคอลเลกชัน (วัตถุ) ที่ประกอบด้วยแอตทริบิวต์ทั้งหมดในองค์ประกอบเช่น::
<hello-world2 title = 'ฉันเป็นคำสั่งที่สอง'> </hello-world2>
ชื่อเป็นคุณลักษณะของรอยสัก
มาดูกันว่าจะเกิดอะไรขึ้นเมื่อเทมเพลตเป็นฟังก์ชัน
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " <hello-world> </hello-world> <hello world2 title = 'ฉันเป็นคำสั่งที่สอง'> </hello-world2> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {จำกัด : 'e', แม่แบบ: '<div> <h1> สวัสดีฉันเป็น Lin Bingwen ~~~ </h1> </div>' แทนที่: true};}); app.directive ("helloWorld2", function () {return {จำกัด : 'eac', เทมเพลต: ฟังก์ชั่น (telement, tattrs) {var _html = ''; _html += '<div>' +'hello' +tattrs.title +'</div>'; </script> </html>ผลลัพธ์:
คุณจะเห็นว่าฟิลด์ชื่อเรื่องในแท็กใน Hello-World2 ยังใช้ในคำสั่ง
5.TemplateUrl (สตริงหรือฟังก์ชั่น), พารามิเตอร์เสริมสามารถเป็นได้
(1) สตริงที่แสดงเส้นทางของไฟล์ HTML
(2) ฟังก์ชั่นสามารถยอมรับพารามิเตอร์สองพารามิเตอร์และ Tattrs (ประมาณเดียวกับด้านบน)
หมายเหตุ: ในระหว่างการพัฒนาในพื้นที่คุณต้องเรียกใช้เซิร์ฟเวอร์มิฉะนั้นการใช้ TemplateURL จะทำให้เกิดข้อผิดพลาดสคริปต์การร้องขอข้ามต้นกำเนิด (CORS) เนื่องจากการโหลดเทมเพลต HTML ถูกโหลดแบบอะซิงโครนัสการโหลดเทมเพลตจำนวนมากจะทำให้เว็บไซต์ช้าลง นี่คือเคล็ดลับซึ่งก็คือแคชเทมเพลตก่อน
คุณสามารถโหลดหน้าดัชนีของคุณและรวมรหัสต่อไปนี้เป็นส่วนหนึ่งของหน้าของคุณ
<script type = 'text/ng-template' id = 'hello.html'> <div> <h1> สวัสดีฉันเป็น Lin Bingwen ~~~ </h1> </div> </script>
แอตทริบิวต์ ID ที่นี่ตั้งอยู่บน TemplateUrl
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " <hello-world> </hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {จำกัด : 'e', templateurl: 'hello.html', แทนที่: true};}); </script> <script type = 'text/ng-template' id = 'hello.html'> <div> <h1> สวัสดีฉันเป็น Lin Bingwen ~~~ </h1> </div> </script> </html>ผลลัพธ์ผลลัพธ์:
อีกวิธีหนึ่งในการแคชคือ:
app.run (["$ templatecache", ฟังก์ชั่น ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> สวัสดีฉันเป็น Lin Bingwen ~~~ </h1> </div>");}];ตัวอย่างการใช้งานมีดังนี้:
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " <hello-world> </hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {จำกัด : 'e', templateurl: 'hello.html', แทนที่: true};}); app.run (["$ templatecache", ฟังก์ชั่น ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> สวัสดีฉันเป็น Lin Bingwen ~~~ </h1> </div>");}]; </script> </html>ผลลัพธ์:
ในความเป็นจริงวิธีแรกดีกว่ามันจะเร็วกว่าในการเขียน ผู้เขียนมีวิธีการเขียนมากที่สุดและเป็นครั้งแรกซึ่งรวมอยู่ใน SCPRIT โดยตรง
6. แทนที่
(ค่าบูลีน) ค่าเริ่มต้นเป็นเท็จ เมื่อตั้งค่าเป็นจริงลองมาดูตัวอย่างต่อไปนี้ (เปรียบเทียบตัวอย่างที่ให้ไว้ในเทมเพลต)
เมื่อแทนที่เป็นจริงแท็ก Hello-World จะไม่อยู่ที่นั่นอีกต่อไปมิฉะนั้นจะมีอยู่
7. สปอร์ต
(1) ค่าเริ่มต้นเป็นเท็จ บ่งบอกถึงการสืบทอดของขอบเขตหลัก;
(2) จริง บ่งชี้ว่าการสืบทอดขอบเขตหลักและการสร้างขอบเขตของคุณเอง (ขอบเขตเด็ก);
(3) {} บ่งชี้ว่าการสร้างขอบเขตการแยกใหม่อย่างสมบูรณ์
7.1 ก่อนอื่นให้เข้าใจกลไกการสืบทอดของขอบเขต ลองใช้คำสั่ง ng-controller เป็นตัวอย่าง
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " ng-controller = 'MainController'> พ่อ: {{{name}} <อินพุต ng-model = "name"/> <div my-directive> </div> </div> </body> <script type = "text/javascript"> var app = angular.module ( App.Controller ('MainController', ฟังก์ชั่น ($ scope) {$ scope.name = 'Lin Bingwen';}); app.directive ('myDirective', function () {return {จำกัด : 'ea', ขอบเขต: เท็จ, เทมเพลต: '<div> ลูกชาย: {{{name}} <อินพุต ng-model = "ชื่อ"/> </div>'};}); </script> </html>ต่อไปเราใช้ตัวอย่างที่ง่ายและชัดเจนเพื่อแสดงความแตกต่างในค่าขอบเขต:
ขอบเขต: เท็จ
ขอบเขต: จริง
ขอบเขต:{}
เมื่อเท็จลูกชายสืบทอดคุณค่าของพ่อและเปลี่ยนแปลงคุณค่าของพ่อและคุณค่าของลูกชายก็เปลี่ยนไปและในทางกลับกัน (การสืบทอดไม่ได้แยกออก)
เมื่อเป็นจริงลูกชายสืบทอดคุณค่าของพ่อและเปลี่ยนแปลงคุณค่าของพ่อ ค่าของลูกชายเปลี่ยนแปลงไปตามลำดับ แต่เมื่อค่าของลูกชายเปลี่ยนแปลงค่าของพ่อยังคงไม่เปลี่ยนแปลง (มรดกและการแยก)
เมื่อ {} ค่าของพ่อไม่ได้รับมรดกดังนั้นค่าของลูกชายจึงว่างเปล่า การเปลี่ยนมูลค่าของฝ่ายใดฝ่ายหนึ่งไม่สามารถส่งผลกระทบต่อมูลค่าของอีกฝ่าย (ไม่มีมรดกและแยก)
เคล็ดลับ: การแยกขอบเขตเป็นตัวเลือกที่ดีเมื่อคุณต้องการสร้างส่วนประกอบที่ใช้ซ้ำได้ ด้วยการแยกขอบเขตเรามั่นใจว่าคำสั่งนั้น 'เป็นอิสระ' และสามารถแทรกลงในแอพ HTML ใด ๆ ได้อย่างง่ายดายและวิธีการนี้จะป้องกันไม่ให้ขอบเขตหลักจากการปนเปื้อน
7.2 ขอบเขตการแยกคุณสามารถเข้าถึงคุณสมบัติของขอบเขตหลักผ่านนโยบายที่มีผลผูกพัน
Directive ให้สามวิธีในการโต้ตอบกับสถานที่นอกการแยกเมื่อใช้ขอบเขตการแยก ทั้งสามนี้คือ
@ ผูกแอตทริบิวต์ขอบเขตท้องถิ่นกับค่าคุณสมบัติของโหนด DOM ปัจจุบัน ผลลัพธ์เป็นสตริงเสมอเพราะแอตทริบิวต์ DOM เป็นสตริง
& จัดเตรียมวิธีในการดำเนินการนิพจน์ในบริบทของขอบเขตหลัก หากไม่ได้ระบุชื่อ Attr ชื่อแอตทริบิวต์จะเป็นชื่อท้องถิ่นเดียวกัน
= สร้างการเชื่อมโยงสองทางระหว่างแอตทริบิวต์ขอบเขตท้องถิ่นและชื่อแอตทริบิวต์ขอบเขตหลักผ่านค่าของแอตทริบิวต์ Attive Directive
@ แอตทริบิวต์ขอบเขตท้องถิ่น
@ Method Attributes Local ใช้เพื่อเข้าถึงค่าสตริงที่กำหนดโดย Directive Emternal Environment ซึ่งส่วนใหญ่เชื่อมโยงค่าสตริงภายนอกผ่านแอตทริบิวต์แท็กที่ตั้งอยู่ การเชื่อมโยงนี้คือทางเดียวนั่นคือการเปลี่ยนแปลงที่มีผลผูกพันของขอบเขตหลัก คุณสมบัติของขอบเขตในคำสั่งจะเปลี่ยนแบบซิงโครนัสในขณะที่การเปลี่ยนแปลงที่มีผลผูกพันในขอบเขตถูกแยกและไม่ทราบขอบเขตหลัก
ตัวอย่างต่อไปนี้: Directive ประกาศว่าประเภทขอบเขตไม่ได้แยกและใช้แอตทริบิวต์ @ binding Name และใช้แอตทริบิวต์ชื่อเพื่อผูกแอตทริบิวต์ในขอบเขตหลักในคำสั่ง เมื่อเปลี่ยนค่าของแอตทริบิวต์ในขอบเขตหลักคำสั่งจะอัปเดตค่าแบบซิงโครนัส เมื่อเปลี่ยนค่าคุณสมบัติของค่าคุณสมบัติของขอบเขตของ Directive ขอบเขตของ Parent Scope ไม่สามารถอัปเดตค่าซิงโครนัสได้
รหัส JS:
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " ng-controller = "myController"> <div> <div> ขอบเขตหลัก: <div> พูดว่า: {{ชื่อ}} <br> เปลี่ยนชื่อของขอบเขตหลัก: <อินพุตประเภท = "text" value = "" ng-model = "ชื่อ" </div> <div> ขอบเขตที่แยกได้ (ไม่ได้ใช้ขอบเขตหลัก {{ชื่อ}}): <div name-directive name = "name"> </div> </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.controller ("myController", ฟังก์ชั่น ($ scope) {$ scope.name = "Hello World";}). Directive ("isolatedDirective", ฟังก์ชั่น () {return {scope: {ชื่อ: "@"}, แม่แบบ: ng-model = "name"> '};}); </script> </html>ผลลัพธ์: เอฟเฟกต์เริ่มต้นของหน้า
เอฟเฟกต์ภาพเคลื่อนไหว:
คุณจะเห็นว่าเนื้อหาในขอบเขตหลักมีการเปลี่ยนแปลงและขอบเขตของเด็กมีการเปลี่ยนแปลงในเวลาเดียวกัน และเนื้อหาในส่วนย่อยมีการเปลี่ยนแปลง มันไม่ส่งผลกระทบต่อเนื้อหาในขอบเขตหลัก!
= แอตทริบิวต์ขอบเขตท้องถิ่น
= สร้างการเชื่อมโยงสองทางระหว่างแอตทริบิวต์ขอบเขตท้องถิ่นและชื่อแอตทริบิวต์ขอบเขตหลักผ่านค่าของแอตทริบิวต์ Attive Directive
ความหมายเมื่อคุณต้องการคุณสมบัติสองทางที่ถูกผูกไว้คุณสามารถใช้ = เพื่อแนะนำคุณสมบัติภายนอก ไม่ว่าจะเป็นการเปลี่ยนขอบเขตหลักหรือการแยกคุณสมบัติในขอบเขตขอบเขตหลักและขอบเขตการแยกจะอัปเดตค่าคุณสมบัติในเวลาเดียวกันเพราะพวกเขาเป็นความสัมพันธ์แบบสองทาง
รหัสตัวอย่าง:
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " ng-controller = "myController"> <div> ขอบเขตหลัก: <div> พูดว่า: {{user.name}} <br> เปลี่ยนชื่อของขอบเขตหลัก: <อินพุตประเภท = "text" value = "" ng-model = "ผู้ใช้ divase.name.name.name.name.name.name </div> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.controller ("myController", ฟังก์ชั่น ($ scope) {$ scope.userbase = {ชื่อ: 'สวัสดี', id: 1};}). Directive ("isolatedDirective", function () {return {scope: {user: "="} type = "buttom" value = "" ng-model = "user.name"/> '}}) </script> </html>ผล:
คุณจะเห็นว่าเนื้อหาในขอบเขตหลักและขอบเขตเด็กเหมือนกันเสมอ!
และคุณลักษณะขอบเขตท้องถิ่น
วิธี & ให้วิธีการดำเนินการนิพจน์โดยตรงในบริบทของขอบเขตหลัก นิพจน์นี้สามารถเป็นฟังก์ชั่น
ตัวอย่างเช่นเมื่อคุณเขียนคำสั่งเมื่อผู้ใช้คลิกปุ่มคำสั่งต้องการแจ้งตัวควบคุมคอนโทรลเลอร์จะไม่สามารถรู้ได้ว่าเกิดอะไรขึ้นในคำสั่ง บางทีคุณสามารถทำได้โดยใช้การออกอากาศเหตุการณ์ใน Angular แต่คุณต้องเพิ่มวิธีการฟังเหตุการณ์ในคอนโทรลเลอร์
วิธีที่ดีที่สุดคือการเปิดใช้งาน Directive ในการผ่านฟังก์ชั่นในขอบเขตหลัก เมื่อมีการดำเนินการใด ๆ ในคำสั่งที่ต้องได้รับการอัปเดตไปยังขอบเขตหลักส่วนหนึ่งของโค้ดหรือฟังก์ชั่นสามารถดำเนินการในบริบทขอบเขตของพาเรนต์
ตัวอย่างต่อไปนี้จะดำเนินการฟังก์ชั่นของขอบเขตหลักในคำสั่ง
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " ng-controller = "myController"> <div> ขอบเขตหลัก: <div> พูดว่า: {{value}} </div> </div> <div> ขอบเขตที่แยกได้: <div action directive directive = "click ()"> </div> app.controller ("myController", ฟังก์ชั่น ($ scope) {$ scope.value = "Hello World"; $ scope.lick = function () {$ scope.value = math.random ();};}) value = "ดำเนินการวิธีการของนิยามขอบเขตหลักในคำสั่ง" ng-click = "การกระทำ ()"/> '}}) </script> </html>ผล:
มีเนื้อหามากมายของคำแนะนำมาพูดคุยเกี่ยวกับ transclude, compline, link และ controller
8. การศึกษา
หากคุณไม่ต้องการให้เนื้อหาภายในคำสั่งถูกแทนที่ด้วยเทมเพลตคุณสามารถตั้งค่านี้เป็นจริงได้ โดยทั่วไปจะต้องใช้กับคำสั่ง ngtransclude ตัวอย่างเช่น: แม่แบบ: "<div> สวัสดีทุกคน <div ng-transclude> </div> </div>" ในเวลานี้เนื้อหาภายในคำสั่งจะถูกฝังอยู่ใน NG-Transclude Div นั่นคือมันจะกลายเป็น <div> สวัสดีทุกคน <div> นี่คือเนื้อหาภายในคำสั่ง </div> </div> ค่าเริ่มต้นเป็นเท็จ ตัวเลือกการกำหนดค่านี้ช่วยให้เราสามารถแยกเนื้อหาที่มีอยู่ในองค์ประกอบ Directive แล้ววางไว้ในตำแหน่งที่เฉพาะเจาะจงในเทมเพลต Directive เมื่อคุณเปิดใช้งาน transclude คุณสามารถใช้ NG-transclude เพื่อระบุว่าจะวางเนื้อหาที่แปลได้ที่ไหน
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " ลิงค์ </li> <li> ลิงค์ที่สอง </li></ul> </div> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('sidebox', function () {return {จำกัด : 'ea', ขอบเขต: {title: '@'}, แปล: จริง, เทมเพลต: '<div>/ <div>/ <h2> {{title}} </ h2>/ <pan ng-transclude>/ </ </script> </html>ผลลัพธ์:
เมื่อ transclude: เท็จ
หากคำสั่งใช้พารามิเตอร์ transclude คอนโทรลเลอร์ไม่สามารถตรวจสอบการเปลี่ยนแปลงในโมเดลข้อมูลได้ตามปกติ ขอแนะนำให้ใช้บริการ $ ดูในฟังก์ชั่นลิงค์
9. ผู้ควบคุม
มันอาจเป็นสตริงหรือฟังก์ชั่น
หากเป็นสตริงให้ใช้สตริงเป็นชื่อของคอนโทรลเลอร์เพื่อค้นหาตัวสร้างของคอนโทรลเลอร์ที่ลงทะเบียนในแอปพลิเคชัน
Angular.module ('myapp', []). directive ('mydirective', function () {จำกัด : 'a', // คอนโทรลเลอร์: 'somecontroller'}) // สถานที่อื่น ๆ ในแอปพลิเคชันสามารถเป็นไฟล์เดียวกันหรือไฟล์อื่น ๆ $ attrs, $ transclude) {// ตรรกะคอนโทรลเลอร์ถูกวางไว้ที่นี่}); นอกจากนี้ยังสามารถกำหนดเป็นฟังก์ชั่นที่ไม่ระบุชื่อภายในคำสั่งโดยตรงและเราสามารถฉีดบริการใด ๆ ที่นี่ ($ log, $ หมดเวลา ฯลฯ ) [html] ดูสำเนาธรรมดาดูตัวแบ่งรหัสบนรหัสที่ได้รับจากรหัสของฉัน Slice Angular.module ('MyApp', []) $ transclude) {// ตรรกะคอนโทรลเลอร์ถูกวางไว้ที่นี่}});นอกจากนี้ยังมีบริการพิเศษ (พารามิเตอร์) ที่สามารถฉีดได้
(1) $ SCOPE ขอบเขตที่เกี่ยวข้องกับองค์ประกอบ Directive
(2) $ องค์ประกอบองค์ประกอบที่สอดคล้องกับคำสั่งปัจจุบัน
(3) $ attrs วัตถุที่ประกอบด้วยแอตทริบิวต์ขององค์ประกอบปัจจุบัน
(4) $ transclude, ฟังก์ชันลิงก์ฝังตัวจริงฟังก์ชั่นที่ใช้งานจริงที่ใช้ในการโคลนองค์ประกอบและใช้งาน DOM
หมายเหตุ: เว้นแต่จะใช้เพื่อกำหนดพฤติกรรมที่นำกลับมาใช้ใหม่ได้โดยทั่วไปจะไม่แนะนำที่นี่
ฟังก์ชั่นคอนโทรลเลอร์และลิงก์ของคำสั่ง (ที่จะกล่าวถึงในภายหลัง) สามารถเปลี่ยนได้ ความแตกต่างคือตัวควบคุมส่วนใหญ่จะใช้เพื่อให้พฤติกรรมที่สามารถนำกลับมาใช้ใหม่ระหว่างคำแนะนำ แต่ฟังก์ชั่นลิงค์ลิงค์สามารถกำหนดพฤติกรรมในคำแนะนำภายในปัจจุบันและไม่สามารถนำกลับมาใช้ใหม่ระหว่างคำแนะนำได้
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> บทนำเกี่ยวกับ Angularjs </title> <script type = "text/javaScript" src = " Bingwen ~~~ </hello> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('hello', function () {return {จำกัด : 'ea', transclude: จริง, // โปรดทราบว่ามันจะต้องตั้งค่าเป็นตัวควบคุมจริง: ฟังก์ชั่น ($ scope, $ องค์ประกอบ, $ attrs, $ transclude, $ log) {// ที่นี่คุณสามารถฉีดบริการที่คุณต้องการ $ attrs.mycolor); </script> </html>ผลลัพธ์ผลลัพธ์:
และเอาท์พุทสวัสดีทุกคนภายใต้คอนโซล
ลองดูที่ $ transclude (); ที่นี่สามารถใช้พารามิเตอร์สองพารามิเตอร์แรกคือ $ scope ขอบเขตและที่สองคือฟังก์ชั่นการเรียกกลับพร้อมกับโคลนพารามิเตอร์ และโคลนนี้เป็นเนื้อหาที่ฝังตัว (ห่อหุ้มด้วย jQuery) และคุณสามารถดำเนินการ DOM ได้มากมาย
วิธีที่ง่ายที่สุดคือ
<script> angular.module ('myapp', []). directive ('mysite', function () {return {จำกัด : 'ea', transclude: จริง, คอนโทรลเลอร์: ฟังก์ชั่น ($ scope, $ element, $ attrs, $ transclude, $ log) {var a = $ transclude </script>หมายเหตุ: การใช้ $ transclude จะสร้างขอบเขตใหม่
โดยค่าเริ่มต้นถ้าเราเพียงแค่ใช้ $ transclude () ขอบเขตเริ่มต้นคือขอบเขตที่สร้างขึ้นโดย $ transclude
แต่ถ้าเราใช้ $ transclude ($ scope, function (clone) {}) ดังนั้นขอบเขตคือขอบเขตของคำสั่ง
จากนั้นคำถามก็มาอีกครั้ง ถ้าเราต้องการใช้ขอบเขตหลัก
$ SCOPE. $ PARTAN
ในทำนองเดียวกันหากคุณต้องการขอบเขตใหม่คุณสามารถใช้ $ SCOPE. $ parent.new ();
10. Concontrolleras
ตัวเลือกนี้ใช้เพื่อตั้งค่านามแฝงของคอนโทรลเลอร์ของคุณ
ในอดีตเรามักจะใช้วิธีนี้ในการเขียนโค้ด:
Angular.Module ("App", []) .Controller ("DeMocontroller", ["$ scope", ฟังก์ชั่น ($ scope) {$ scope.title = "angualr";}]) <div ng-app = "แอป" ng-controller = "Democontroller"ต่อมา AngularJS1.2 นำน้ำตาลไวยากรณ์ใหม่มาให้เราเพื่อให้เราสามารถเขียนได้เช่นนี้
Angular.module ("App", []) .Controller ("Democontroller", [function () {this.title = "angualr";}]) <div ng-app = "แอป" ng-controller = "democontrollerนอกจากนี้เรายังสามารถเขียนสิ่งนี้ในคำสั่ง
<script> angular.module ('myapp', []). Directive ('mysite', function () {return {จำกัด : 'ea', transclude: จริง, คอนโทรลเลอร์: 'somecontroller', คอนโทรลเลอร์: 'MainController' // </script>11. REQUIRE (สตริงหรืออาร์เรย์)
สตริงแสดงชื่อของคำสั่งอื่นซึ่งจะใช้เป็นพารามิเตอร์ที่สี่ของฟังก์ชันลิงก์ เราสามารถยกตัวอย่างเพื่อแสดงให้เห็นถึงการใช้งานที่เฉพาะเจาะจง สมมติว่าเราต้องเขียนสองคำแนะนำตอนนี้ มีวิธีการที่ทับซ้อนกันมากมายในฟังก์ชั่นลิงค์ลิงค์ (ฟังก์ชั่นลิงก์จะถูกกล่าวถึงในภายหลัง) ในเวลานี้เราสามารถเขียนวิธีการซ้ำ ๆ เหล่านี้ในคอนโทรลเลอร์ของคำสั่งที่สาม (คอนโทรลเลอร์ยังกล่าวถึงข้างต้นเพื่อให้พฤติกรรมการใช้ซ้ำระหว่างคำแนะนำ) จากนั้นในคำแนะนำทั้งสองนี้ต้องใช้คำสั่งด้วยฟิลด์คอนโทรลเลอร์ (คำสั่งที่สาม)
ในที่สุดคุณสามารถอ้างถึงวิธีการที่ทับซ้อนกันเหล่านี้ผ่านพารามิเตอร์ที่สี่ของฟังก์ชันลิงค์ลิงค์
<! doctype html> <html ng-app = "myapp"> <head> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js" <sinner-directive2> </sinner-directive2> </outer-directive> <script> var app = angular.module ('myapp', []); app.directive ('outerdirective', function () {return {scope: {}, จำกัด : 'ae', คอนโทรลเลอร์: ฟังก์ชั่น ($ scope) {this.say = ฟังก์ชั่น (สักวัน) {console.log ('got:' + somedirective.message); app.directive ('innerdirective', function () {return {scope: {}, จำกัด : 'ae', ต้องการ: '^outerdirective', ลิงก์: ฟังก์ชั่น (ขอบเขต, elem, attrs, controlinstance) {scope.message = "hi, leifeng"; app.directive ('innerDirective2', function () {return {scope: {}, จำกัด : 'ae', ต้องการ: '^outerdirective', ลิงก์: ฟังก์ชั่น (ขอบเขต, elem, attrs, controlinstance) {scope.message = "hi, shushu"; </script> </body> </html>คำแนะนำในการกำกับดูแลและคำสั่ง innerdirective2 ในตัวอย่างการใช้ตัวอย่างซ้ำข้างต้นที่กำหนดไว้ในคอนโทรลเลอร์ของ Directive Outerdirective
มีการอธิบายเพิ่มเติมว่าคอนโทรลเลอร์ในคำสั่งใช้เพื่อสื่อสารระหว่างคำแนะนำที่แตกต่างกัน
นอกจากนี้เราสามารถเพิ่มคำนำหน้าไปยังค่าพารามิเตอร์ของความต้องการซึ่งจะเปลี่ยนพฤติกรรมของตัวควบคุมการค้นหา:
(1) หากไม่มีคำนำหน้าคำสั่งจะถูกค้นหาในคอนโทรลเลอร์ที่จัดทำโดยตัวเอง หากไม่พบคอนโทรลเลอร์ข้อผิดพลาดจะถูกโยนลงไป
(2)? หากไม่พบคอนโทรลเลอร์ที่ต้องการในคำสั่งปัจจุบัน NULL จะถูกส่งผ่านไปยังพารามิเตอร์ที่สี่ของฟังก์ชันการเชื่อมต่อลิงก์
(3)^หากไม่พบคอนโทรลเลอร์ที่ต้องการในคำสั่งปัจจุบันตัวควบคุมขององค์ประกอบหลักจะพบได้
(4)?^ การรวมกัน
12. กระบวนการรวบรวมคำสั่งของ Anguar
โหลดไลบรารี AngularJS ก่อนและค้นหาคำสั่ง NG-APP เพื่อค้นหาขอบเขตของแอปพลิเคชัน
โทร $ Compile Service สำหรับการรวบรวมตามขอบเขตที่กำหนดโดย NG-APP AngularJS จะสำรวจเอกสาร HTML ทั้งหมดและประมวลผลคำแนะนำที่ประกาศไว้ในหน้าตามลำดับความสำคัญของคำแนะนำตามคำแนะนำ DOM ถูกแปลงตามพารามิเตอร์การกำหนดค่า (เทมเพลตสถานที่ transclude ฯลฯ ) ในคำแนะนำจากนั้นเริ่มดำเนินการฟังก์ชั่นการรวบรวมของแต่ละคำสั่งตามลำดับ (ถ้าฟังก์ชันคอมไพล์ถูกกำหนดไว้ในคำสั่ง) เพื่อแปลงเทมเพลตเอง
หมายเหตุ: ฟังก์ชั่นคอมไพล์ที่นี่ได้รับการกำหนดค่าในคำสั่งของเราซึ่งแตกต่างจากบริการ $ Compile ที่กล่าวถึงข้างต้น หลังจากการคอมไพล์แต่ละฟังก์ชั่นจะถูกเรียกใช้ฟังก์ชันลิงก์จะถูกส่งกลับและฟังก์ชั่นลิงก์ทั้งหมดจะรวมเข้ากับฟังก์ชั่นลิงค์ขนาดใหญ่
จากนั้นฟังก์ชั่นลิงค์ขนาดใหญ่นี้จะถูกเรียกใช้งานส่วนใหญ่สำหรับการเชื่อมโยงข้อมูลการปรับเปลี่ยนข้อมูลในขอบเขตแบบไดนามิกโดยการลงทะเบียนผู้ฟังบน DOM หรือใช้ $ นาฬิกาเพื่อฟังตัวแปรในขอบเขตเพื่อปรับเปลี่ยน DOM ดังนั้นการสร้างการเชื่อมโยงสองทาง ฯลฯ สิ่งที่เธอทำนั้นเหมือนกับฟังก์ชั่นลิงค์ขนาดใหญ่ที่สังเคราะห์โดยฟังก์ชั่นลิงก์ทั้งหมดหลังจากการรวบรวมผลตอบแทนด้านบน
ดังนั้น: ในตัวเลือกคำสั่งคอมไพล์และลิงค์จึงเป็นเอกสิทธิ์เฉพาะบุคคล หากมีการตั้งค่าตัวเลือกทั้งสองนี้ในเวลาเดียวกันฟังก์ชั่นที่ส่งคืนโดยการรวบรวมจะถือเป็นฟังก์ชั่นลิงก์และตัวเลือกลิงค์จะถูกละเว้น
13. ฟังก์ชั่นคอมไพล์
ฟังก์ชั่นคอมไพล์ (โทร., tattrs, transclude) {... }
ฟังก์ชั่นการรวบรวมใช้เพื่อจัดการสถานการณ์ที่ต้องแก้ไขเทมเพลต DOM เนื่องจากคำแนะนำส่วนใหญ่ไม่จำเป็นต้องมีการปรับเปลี่ยนเทมเพลตฟังก์ชั่นนี้ไม่ได้ใช้กันทั่วไป ตัวอย่างที่จำเป็นต้องใช้รวมถึง ngtrepeat ซึ่งต้องการเทมเพลตที่จะแก้ไขและ NGView ต้องการเนื้อหาที่จะโหลดแบบอะซิงโครนัส ฟังก์ชั่นที่คอมไพล์ยอมรับพารามิเตอร์ต่อไปนี้
การถ่ายทอดสด - องค์ประกอบเทมเพลต - องค์ประกอบที่คำสั่งอยู่ มันปลอดภัยที่จะเปลี่ยนรูปองค์ประกอบนี้และองค์ประกอบย่อย
Tattrs - แอตทริบิวต์เทมเพลต - แอตทริบิวต์ทั้งหมดที่ประกาศโดยคำสั่งขององค์ประกอบนี้จะถูกแชร์ในฟังก์ชันที่รวบรวม
Transclude - ฟังก์ชั่นการเชื่อมโยงแบบฝังตัว (ขอบเขต, clonelinkingfn)
หมายเหตุ: อย่าดำเนินการใด ๆ นอกเหนือจากการเสียรูปแบบ DOM ในฟังก์ชั่นที่รวบรวม ที่สำคัญกว่านั้นการลงทะเบียนของเหตุการณ์การฟัง DOM ควรทำในฟังก์ชั่นที่เชื่อมโยงไม่ใช่ในฟังก์ชั่นที่รวบรวม
ฟังก์ชั่นที่รวบรวมสามารถส่งคืนวัตถุหรือฟังก์ชั่น
ฟังก์ชั่นการส่งคืน - เทียบเท่ากับฟังก์ชั่นลิงค์ที่ลงทะเบียนโดยใช้แอตทริบิวต์ลิงก์ของวัตถุการกำหนดค่าเมื่อไม่มีฟังก์ชั่นที่รวบรวม
วัตถุส่งคืน - ส่งคืนวัตถุที่ลงทะเบียนฟังก์ชั่นผ่านแอตทริบิวต์ก่อนหรือโพสต์ อ้างถึงคำอธิบายของฟังก์ชั่นการเชื่อมโยงล่วงหน้าและโพสต์ไลฟ์ด้านล่าง
14. ฟังก์ชั่นการเชื่อมโยง
ลิงก์ฟังก์ชั่น (ขอบเขต, iElement, iATTRS, คอนโทรลเลอร์) {... }
ฟังก์ชั่นลิงค์มีหน้าที่รับผิดชอบในการลงทะเบียนกิจกรรม DOM และอัปเดต DOM มันถูกดำเนินการหลังจากเทมเพลตถูกโคลนและเป็นที่ที่เขียนโค้ดตรรกะคำสั่งส่วนใหญ่
ขอบเขต - ขอบเขตที่คำสั่งต้องฟัง
IElement - อินสแตนซ์องค์ประกอบ - องค์ประกอบที่คำสั่งอยู่ มันปลอดภัยที่จะทำงานกับองค์ประกอบเด็กขององค์ประกอบในฟังก์ชั่น postlink เพราะพวกเขาทั้งหมดเชื่อมโยงกัน
IATTRS - แอตทริบิวต์อินสแตนซ์ - แอตทริบิวต์อินสแตนซ์รายการมาตรฐานของแอตทริบิวต์ที่ประกาศไว้ในองค์ประกอบปัจจุบันซึ่งมีการแชร์ระหว่างฟังก์ชั่นที่เชื่อมโยงทั้งหมด
คอนโทรลเลอร์ - อินสแตนซ์คอนโทรลเลอร์นั่นคือคอนโทรลเลอร์ภายใน Direct2 ที่ร้องขอโดยคำสั่งปัจจุบัน ตัวอย่างเช่น: คอนโทรลเลอร์: function () {this.addStrength = function () {}} ใน Direct2 Directive จากนั้นในฟังก์ชั่นลิงก์ของคำสั่งปัจจุบันคุณสามารถเรียกมันผ่านคอนโทรลเลอร์ addStrength
ฟังก์ชั่นการเชื่อมโยงล่วงหน้าจะดำเนินการก่อนที่องค์ประกอบลูกจะเชื่อมโยง ไม่สามารถใช้เพื่อเปลี่ยนรูปแบบ DOM ในกรณีที่ฟังก์ชั่นลิงก์ไม่สามารถหาองค์ประกอบที่ถูกต้องในการเชื่อมโยงได้
ฟังก์ชั่นการเชื่อมโยงโพสต์องค์ประกอบทั้งหมดจะดำเนินการหลังจากเชื่อมโยง
ภาพประกอบ:
ตัวเลือกคอมไพล์นั้นไม่ได้ใช้บ่อย แต่ใช้ฟังก์ชันลิงก์บ่อยครั้ง โดยพื้นฐานแล้วเมื่อเราตั้งค่าตัวเลือกลิงค์เราจะสร้างฟังก์ชั่นลิงก์ postlink () เพื่อให้ฟังก์ชั่น Compile () สามารถกำหนดฟังก์ชั่นลิงค์ได้ โดยทั่วไปหากมีการตั้งค่าฟังก์ชั่นคอมไพล์หมายความว่าเราต้องการดำเนินการ DOM ก่อนที่จะมีการใส่คำแนะนำและข้อมูลเรียลไทม์ลงใน DOM มันปลอดภัยที่จะดำเนินการ DOM เช่นการเพิ่มและลบโหนดในฟังก์ชั่นนี้ ตัวเลือกการคอมไพล์และลิงค์นั้นไม่เหมือนกัน หากมีการตั้งค่าตัวเลือกทั้งสองนี้ในเวลาเดียวกันฟังก์ชั่นที่ส่งคืนโดยการรวบรวมจะถือเป็นฟังก์ชั่นลิงก์และตัวเลือกลิงค์จะถูกละเว้น ฟังก์ชั่นการแปลมีหน้าที่ในการแปลงเทมเพลต DOM ฟังก์ชั่นลิงค์มีหน้าที่เชื่อมโยงขอบเขตและ DOM DOM สามารถดำเนินการด้วยตนเองก่อนที่ขอบเขตจะเชื่อมโยงกับ DOM ในทางปฏิบัติการดำเนินการประเภทนี้หายากมากเมื่อเขียนคำแนะนำที่กำหนดเอง แต่มีคำแนะนำในตัวหลายข้อที่ให้ฟังก์ชั่นดังกล่าว ฟังก์ชั่นลิงค์เป็นทางเลือก หากมีการกำหนดฟังก์ชั่นที่คอมไพล์แล้วจะส่งคืนฟังก์ชั่นที่เชื่อมโยงดังนั้นเมื่อมีการกำหนดฟังก์ชั่นทั้งสองฟังก์ชั่นคอมไพล์โอเวอร์โหลดฟังก์ชั่นที่เชื่อมโยง หากคำแนะนำของเราง่ายและไม่ต้องการการตั้งค่าเพิ่มเติมเราสามารถส่งคืนฟังก์ชั่นจากฟังก์ชั่นโรงงาน (ฟังก์ชั่นการโทรกลับ) เพื่อแทนที่วัตถุ หากทำเสร็จแล้วฟังก์ชั่นนี้เป็นฟังก์ชันลิงก์
บทความนี้ทำซ้ำ http://blog.csdn.net/evankaka
ข้างต้นเป็นเนื้อหาทั้งหมดของการใช้ AngularJs: คำสั่งคำสั่งฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน