مجال AngularJS

النطاق (scope) هو الجزء الذي يتم فيه ربط HTML (النموذج المرئي) وJavaScript (المسيطر).

النطاق هو عنصر يحتوي على خصائص ومتغيرات.

النطاق متاح للنموذج المرئي والمسيطر.

كيفية استخدام النطاق؟

عندما تقوم بإنشاء مسيطر في 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 = ";ولف";
});
</script>

جرب بنفسك

عند إضافة إلى التحكم $scope عند إضافة ملكيات إلى موضوع، يمكن للعرض (HTML) الوصول إلى هذه الملكيات.

في العرض، لا تستخدم $scope السابق، حيث يمكنك التطرق إلى اسم ملكية واحدة فقط، مثل {{carname}}。

فهم المجال

إذا نظرنا إلى تطبيق AngularJS كنظام مكون من

  • العرض، وهو HTML.
  • النموذج، وهو البيانات المتاحة للعرض.
  • التحكم، وهو دالة JavaScript، تستخدم لإنشاء/تعديل/إزالة/تحكم البيانات.

إذن فإن المجال هو النموذج.

مجال هو موضوع من الممتلكات والأساليب، وتتوفر هذه الممتلكات والأساليب للعرض والتحكم.

مثال

إذا قمت بتغيير في العرض، سيتم تحديث النموذج والتحكم:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>اسمي هو {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</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 الجذر

جميع التطبيقات تحتوي على $rootScope، وهي موجودة في ng-app مجال تم إنشاؤه على عنصر HTML باستخدام تعليمات.

rootScope متاح في جميع أنحاء التطبيق.

إذا كان لدى متغير نفس الاسم في مجال التحكم الحالي وrootScope، فإن التطبيق سيستخدم المتغير في مجال التحكم الحالي.

مثال

مجال التحكم وrootScope يحتويان على متغير اسمه "color":

<body ng-app="myApp">
<p>لون المفضلة للrootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>مجال المفضلة للمستشار:</p>
  <h1>{{color}}</h1>
</div>
<p>لون المفضلة للمجال الجذر هو ما يزال:</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>

جرب بنفسك