دامنه قسمت اتصال بین HTML ( نمایش ) و جاوا اسکریپت (کنترل کننده) است.
دامنه یک شی با خواص و روش های در دسترس است، دامنه برای هر دو بخش نمایش و کنترلر در دسترس است.
چگونه از دامنه استفاده کنیم؟
هنگامی که یک کنترلر را در AngularJS ایجاد میکنید، شیء $scope را به عنوان یک آرگومان می فرستید:
مثال
خواص ساخته شده در بخش کنترل کننده، می تواند به بخش نمایش فرستاده شود:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
app.controller(‘myCtrl’, function($scope) {
$scope.carname = “Volvo”;
});
</script>
هنگام اضافه کردن خواص به شیء $scope در کنترل کننده، نمایش (HTML) به این ویژگی ها دسترسی پیدا می کند.
در بخش نمایش،از پیشوند $scope استفاده نمی کنید، بلکه فقط به یک نام ویژگی مانند {{carname}} مراجعه می کنید.
درک دامنه
اگر برنامه AngularJS را در نظر بگیریم شامل قسمت های زیر است:
- نمایش، کد HTML است.
- مدل، که داده های موجود برای نمایش فعلی است.
- کنترل کننده، که برنامه جاوا اسکریپت است که داده ها را تغییر می دهد / حذف / کنترل می کند.
پس دامنه در مدل قرار دارد.
دامنه یک شیء جاوا اسکریپت با خواص و متدهایی است که برای هر دو بخش نمایش و کنترل کننده در دسترس هستند.
مثال
اگر تغییراتی در نمایش ایجاد کنید، مدل و کنترلر به روز می شود:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</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 هستند که در کل کاربرد شناخته می شود. این دامنه در عنصر HTML که دارای دایکتیو ng-app است ، تعریف می شود. پس (دامنه ریشه) rootScope در کل برنامه در دسترس است.
اگر یک متغیر در هر دو دامنه فعلی و در rootScope یک نام مشابه داشته باشد، برنامه از آن یکی که در دامنه فعلی قراردارد استفاده می کند.
مثال: یک متغیر به نام “رنگ” در هر دو دامنه کنترل و در rootScope وجود دارد:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</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>