نطاق هو جزء ملزم بين 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 ، كنت مجرد إشارة إلى PROPERTYNAME، مثل {{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> انها محاولة لنفسك » تعرف النطاق الخاص بك
من المهم أن تعرف أي نطاق كنت تتعامل مع، في أي وقت.
في المثالين أعلاه هناك مجال واحد فقط، مع العلم بذلك النطاق الخاص بك ليست قضية، ولكن لتطبيقات أكبر يمكن أن يكون هناك أقسام في DOM HTML والتي يمكن الوصول إليها فقط بعض النطاقات.
مثال
عند التعامل مع 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> انها محاولة لنفسك »