اسکوپ ها (Scopes)
«اسکوپ (Scope)» پل بین نما و کنترلر است. اسکوپ یک شیء جاوااسکریپتی است. این شیء ویژگی و متد نگه می دارد. نما و کنترلر هر دو به آن دسترسی دارند. مثل دفتر مشترک بین دانش آموز و معلم.
اسکوپ چگونه استفاده می شود؟
در کنترلر، شیء $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>
درک اسکوپ و همگام سازی
با «ng-model» مقدار ورودی به اسکوپ می چسبد. تغییر نما، مدل را عوض می کند.
<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>
شناخت اسکوپ در تکرارها
در «ng-repeat»، هر تکرار به آیتم فعلی دسترسی دارد. مانند x در لیست.
<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>
ریشه اسکوپ ($rootScope)
«روت اسکوپ ($rootScope)» همه جا دردسترس است. ولی اسکوپ نزدیک تر، غالب می شود.
<body ng-app="myApp">
<h1>{{ color }}</h1>
<div ng-controller="myCtrl">
<h1>{{ color }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = 'red';
});
<\/script>
<\/body>
گام های عملی
- ماژول بساز و کنترلر تعریف کن.
- ویژگی ها را روی
$scopeقرار بده. - در نما، مستقیماً نام ویژگی ها را بنویس.
- برای لیست ها از
ng-repeatاستفاده کن.
نکته: درباره کنترلرها در کنترلرها بخوان. برای ادامه، به فیلترها برو.
جمع بندی سریع
- اسکوپ شیء مشترک بین نما و کنترلر است.
- ng-model داده را هم زمان می سازد.
- در تکرار، هر آیتم اسکوپ خودش را دارد.
- $rootScope همه جا در دسترس است.