AngularJS สคอป

โซปเกาะ (scope) เป็นส่วนที่เชื่อมโยงระหว่าง HTML (มุมมอง) และ JavaScript (ควบคุมเครื่องมือ):

โซปเกาะเป็นตัวแปรที่มีคุณสมบัติและขั้นตอนการทำงานที่สามารถใช้งานได้:

โซปเกาะสามารถใช้งานได้ทั้งในตัวแปรมุมมองและควบคุมเครื่องมือ。

จะใช้สำหรับโซปเกาะมากฉันไหม?

เมื่อคุณสร้างควบคุมเครื่องมือใน AngularJS คุณจะ $scope ส่งผ่านประกายว่าตัวแปร:

ตัวอย่าง

ในควบคุมเครื่องมือสร้างตัวแปร สามารถอ้างอิงในตัวแปรมุมมองได้:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
</script>

ลองเดี๋ยวเอง

เมื่อเรียกใช้ในคอนโทรลเลอร์ข้างใน}} $scope เมื่อเพิ่มคุณสมบัติต่อตัวแปร แสดงภาพ (HTML) สามารถเข้าถึงคุณสมบัติเหล่านั้นได้

ในแสดงภาพ คุณไม่ใช้ $scope คำหน้าตาคือ คุณเพียงต้องอ้างอิงชื่อพฤติกรรมเพียงอันเดียว ตัวอย่าง {{carname}}。

เข้าใจโซนหน้าที่

ถ้าเรามองAngularJS โปรแกรมที่ประกอบด้วยส่วนต่างๆ ตามต่อไปนี้:

  • แสดงภาพ คือ HTML
  • โมเดล คือข้อมูลที่สามารถใช้ในแสดงภาพปัจจุบัน
  • คอนโทรลเลอร์ คือฟังก์ชัน JavaScript ที่ใช้เพื่อสร้าง/แก้ไข/ลบ/ควบคุมข้อมูล

โซนหน้าที่นั้นเป็นโมเดล

โซนหน้าที่เป็นตัวแปรของ JavaScript ที่มีคุณสมบัติและวิธีที่ใช้ได้ทั้งโซนหน้าที่และคอนโทรลเลอร์

ตัวอย่าง

ถ้าคุณทำการเปลี่ยนแปลงในแสดงภาพ โมเดลและคอนโทรลเลอร์จะปรับปรุง:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>ชื่อของฉันคือ {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

ลองเดี๋ยวเอง

เข้าใจโซนหน้าที่ของคุณ

การเข้าใจโซนหน้าที่ที่คุณกำลังจัดการเป็นสิ่งที่สำคัญในทุกโอกาส

ในตัวอย่างทั้งสองที่กล่าวข้างต้นมีเพียงโซนหน้าที่เดียว ดังนั้น การเข้าใจโซนหน้าที่ของคุณไม่ใช่ปัญหา แต่สำหรับโปรแกรมที่ใหญ่ขึ้น ส่วนบางส่วนของ HTML DOM อาจสามารถเข้าถึงโซนหน้าที่บางส่วนเท่านั้น

ตัวอย่าง

เมื่อจะบวกคำสั่ง ng-repeat ทุกครั้งที่สร้างขึ้นมีสามารถเข้าถึงวัตถุที่สำหรับการสร้างตัวโซนหน้าที่ในครั้งนี้:

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

ลองเดี๋ยวเอง

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

โซนหลัก

ทุกโปรแกรมมี $rootScope，มันตั้งอยู่ใน ng-app โซนหน้าที่ที่สร้างขึ้นบนองค์ประกอบ HTML ที่ใช้คำสั่ง

rootScope สามารถใช้ได้ทั่วโปรแกรม

ถ้าตัวแปรมีชื่อเดียวกันกับโซนหน้าที่ปัจจุบันและrootScope โดยเฉพาะแล้วในโปรแกรมนี้ โปรแกรมจะใช้ตัวแปรในโซนหน้าที่ปัจจุบัน

ตัวอย่าง

ทั้งๆที่มีตัวแปรชื่อ "color" หนึ่งในโซนหน้าที่และrootScope:

<body ng-app="myApp">
<p>สีที่ชื่นชอบของrootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>สีที่ชอบของควบคุมเชิงสเกล:</p>
  <h1>{{color}}</h1>
</div>
<p>สีที่ดีที่สุดของ rootScope ยังคงเป็น:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
  $scope.color = "red";
});
</script>
</body>

ลองเดี๋ยวเอง