AngularJS scope’lari
Scope (ko‘rinish sohasi) — HTML (ko‘rinish) va JavaScript (kontroller) o‘rtasidagi bog‘lovchi qism.
Scope — mavjud xususiyatlar va metodlarga ega obyekt.
Scope ham ko‘rinish, ham kontroller uchun mavjud.
Scope’dan qanday foydalaniladi?
AngularJS’da kontroller yaratganingizda $scope obyektini argument sifatida uzatasiz:
Misol
Kontrollerda yaratilgan xususiyatlarga ko‘rinishda murojaat qilish mumkin:
<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>
O‘zingiz sinab ko‘ring »
Kontrollerda $scope obyektiga xususiyatlar qo‘shilganda, ko‘rinish (HTML) ushbu xususiyatlardan foydalana oladi.
Ko‘rinishda $scope prefiksidan foydalanilmaydi, shunchaki xususiyat nomiga murojaat qilasiz, masalan {{carname}}.
Scope’ni tushunish
Agar AngularJS ilovasini quyidagilardan iborat deb hisoblasak:
- Ko‘rinish (View) — bu HTML.
- Model — joriy ko‘rinish uchun mavjud bo‘lgan ma’lumotlar.
- Kontroller — ma’lumotlarni yaratadigan/o‘zgartiradigan/o‘chiradigan/boshqaradigan JavaScript funksiyasi.
Unda scope — bu Model.
Scope — xususiyatlar va metodlarga ega JavaScript obyekti bo‘lib, ular ham ko‘rinish, ham kontroller uchun mavjud.
Misol
Agar ko‘rinishda o‘zgarish qilsangiz, model va kontroller yangilanadi:
<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>
O‘zingiz sinab ko‘ring »
Scope’ingizni biling
Har qanday vaqtda qaysi scope bilan ishlayotganingizni bilish muhim.
Yuqoridagi ikki misolda faqat bitta scope bor, shuning uchun scope’ingizni bilish muammo emas, ammo kattaroq ilovalarda HTML DOM’da faqat ma’lum scope’larga kira oladigan bo‘limlar bo‘lishi mumkin.
Misol
ng-repeat direktivasi bilan ishlaganda har bir takrorlanish joriy takrorlanish obyektiga kira oladi:
<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>
O‘zingiz sinab ko‘ring »
Har bir <li> elementi joriy takrorlanish obyektiga kira oladi, bu holda u string bo‘lib, unga x orqali murojaat qilinadi.
Root scope (ildiz scope)
Barcha ilovalarda $rootScope mavjud bo‘lib, u ng-app direktivasini o‘z ichiga olgan HTML elementida yaratilgan scope hisoblanadi.
rootScope butun ilova bo‘ylab mavjud.
Agar o‘zgaruvchi joriy scope’da ham, rootScope’da ham bir xil nomga ega bo‘lsa, ilova joriy scope’dagisidan foydalanadi.
Misol
"color" nomli o‘zgaruvchi ham kontroller scope’ida, ham rootScope’da mavjud:
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!