محدوده‌های 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) نام مشابهی داشته باشد، برنامه از متغیر دامنه فعلی استفاده خواهد کرد.

مثال

در هر دو دامنه کنترل‌کننده و rootScope یک متغیر به نام "color" وجود دارد:

<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>

به طور مستقیم امتحان کنید