نطاق AngularJS
النطاق هو جزء الربط بين HTML (طريقة العرض) وجافا سكريبت (وحدة التحكم).
النطاق هو كائن مع الخصائص والأساليب المتاحة.
النطاق متاح لكل من العرض ووحدة التحكم.
كيف تستخدم النطاق؟
عندما تقوم بإنشاء وحدة تحكم في 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>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 ، فسيستخدم التطبيق المتغير الموجود في النطاق الحالي.
مثال
يوجد متغير باسم "color" في كل من نطاق وحدة التحكم وفي 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>