Latest web development tutorials

AngularJS ขอบเขต (Scope)

ขอบเขต (ขอบเขต) ถูกนำมาใช้ในการเชื่อมโยง HTML (view) และ JavaScript (Controller) ระหว่าง

ขอบเขตเป็นวัตถุวิธีการและคุณสมบัติที่มีอยู่

ขอบเขตสามารถนำมาใช้ในมุมมองและควบคุม

วิธีการใช้ขอบเขต

เมื่อคุณสร้าง AngularJS ควบคุมคุณสามารถ$ วัตถุขอบเขตเป็นอาร์กิวเมนต์:

AngularJS ตัวอย่าง

ควบคุมคุณลักษณะที่สอดคล้องกับคุณลักษณะดูเมื่อ:

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl">

<h1> {{carname}} </ h1>

</ div>

<script>
var App = angular.module ( 'MyApp' []);

app.controller ( 'myCtrl' ฟังก์ชั่น ( $ ขอบเขต) {
$ scope.carname = "วอลโว่";
});
</ script>

ลอง»

เมื่อมีการเพิ่มขอบเขตวัตถุ $ ในการควบคุมมุมมอง (HTML) จะได้รับคุณสมบัติเหล่านี้

View คุณไม่จำเป็นต้องเพิ่มคำนำหน้า$ ขอบเขตที่คุณจะต้องเพิ่มชื่อแอตทริบิวต์เช่น:{{}} carname

ภาพรวมขอบเขต

แอพลิเคชัน AngularJS ประกอบด้วยต่อไปนี้:

  • ดู (view) ที่เป็น HTML
  • แบบจำลอง (Model), มุมมองปัจจุบันของข้อมูลที่มีอยู่
  • Controller (Controller), ฟังก์ชั่นจาวาสคริปต์ที่คุณสามารถเพิ่มหรือปรับเปลี่ยนคุณสมบัติ

ขอบเขตรูปแบบ

ขอบเขตเป็นคุณสมบัติของวัตถุ JavaScript และวิธีการที่มีคุณลักษณะเหล่านี้และวิธีการที่สามารถนำมาใช้ในการดูและการควบคุม

AngularJS ตัวอย่าง

ถ้าคุณเปลี่ยนมุมมองและรูปแบบการควบคุมจะมีการปรับปรุง:

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl">

<input NG-รุ่น = "ชื่อ ">

<h1> ชื่อของฉันคือ {{name}} </ h1 >

</ div>

<script>
var App = angular.module ( 'MyApp' []);

app.controller ( 'myCtrl' ฟังก์ชั่น ( $ ขอบเขต) {
$ scope.name = "จอห์นดาวโจนส์";
});
</ script>

ลอง»

ขอบเขตขอบเขต

เข้าใจถึงขอบเขตที่คุณกำลังใช้เป็นสิ่งสำคัญมาก

ในทั้งสองกรณีมีเพียงขอบเขตขอบเขตหนึ่งดังนั้นกระบวนการที่ค่อนข้างง่าย แต่ในโครงการขนาดใหญ่, HTML DOM มีขอบเขตต่างๆจากนั้นคุณจำเป็นต้องรู้ขอบเขตของขอบเขตที่สอดคล้องกันคือสิ่งที่คุณใช้

AngularJS ตัวอย่าง

เมื่อเราใช้คำสั่งNG-ซ้ำได้เข้าเยี่ยมชมที่ซ้ำกันของวัตถุที่ซ้ำกันในแต่ละปัจจุบัน:

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl">

<ul>
<li NG-ซ้ำ = "x ในชื่อ"> {{X}} </ li>
</ ul>

</ div>

<script>
var App = angular.module ( 'MyApp' []);

app.controller ( 'myCtrl' ฟังก์ชั่น ( $ ขอบเขต) {
$ scope.names = [ "เอมิล", "โทเบียส", "ไลนัส"];
});
</ script>

ลอง»

แต่ละ<li> องค์ประกอบสามารถเข้าถึงวัตถุที่ซ้ำกันในปัจจุบันที่นี่เป็นสตริงที่สอดคล้องกันและตัวแปร xบ่งชี้

ขอบเขตราก

การใช้งานทุกคนมี$ rootScope ก็จะถูกนำไปใช้กับองค์ประกอบ HTML ทั้งหมด NG-Appสั่งมี

$ rootScope สามารถดำเนินการในโปรแกรมทั้งหมดแต่ละตัวควบคุมอยู่ในขอบเขตของสะพาน Rootscope มีค่าที่กำหนดไว้ในแต่ละตัวควบคุมสามารถใช้ในการ

AngularJS ตัวอย่าง

เมื่อคุณสร้างตัวควบคุมถึง $ rootScope ผ่านเป็นพารามิเตอร์สามารถนำมาใช้ในการสมัคร:

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl">

<h1> {{}} นามสกุลสมาชิกในครอบครัว: </ h1>

<ul>
<li NG-ซ้ำ = "x ในชื่อ"> {{X}} {{นามสกุล}} </ li>
</ ul>

</ div>

<script>
var App = angular.module ( 'MyApp' []);

app.controller ( 'myCtrl' ฟังก์ชั่น ( $ ขอบเขต $ rootScope) {
$ scope.names = [ "เอมิล", "โทเบียส", "ไลนัส"];
$ rootScope.lastname = "Refsnes";
});
</ script>

ลอง»