English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل AngularJS الأساسي

مفهوم AngularJS Scope (النطاق)

المجال (Scope) هو خاصية خاصة لجافا سكريبت يستخدم لربط الوحدة التحكم بالرؤية. يحتوي المجال على بيانات النموذج. في الوحدة التحكم، يتم الوصول إلى بيانات النموذج من خلال $scope.

<script>
　　　var mainApp = angular.module("mainApp", []);
　　　
　　　mainApp.controller("shapeController", function($scope) {
　　　　　　$scope.message = "In shape controller";
　　　　　　$scope.type = "Shape";
　　　});
</script>

في المثال السابق تم النظر في النقاط التالية-

  • $scope يتم تقديمها كمعامل أولي في تعريف بناء الوحدة التحكم.

  • $scope.message و $scope.type هي نماذج تستخدم في صفحة الـ HTML.

  • نحن نصنف قيم النموذج في المodule التطبيقية التي تعكسها الوحدة التحكم

  • يمكننا تعريف الوظائف في $scope.

تنحية المجال

المجال (Scope) معين للوحدة التحكم. إذا قمنا بتعريف وحدات التحكم المدمجة، فإن وحدة التحكم الفرعية ستيرث نطاق وحدة التحكم الأم.

<script>
　　　var mainApp = angular.module("mainApp", []);
　　　
　　　mainApp.controller("shapeController", function($scope) {
　　　　　　$scope.message = "In shape controller";
　　　　　　$scope.type = "Shape";
　　　});
　　　mainApp.controller("circleController", function($scope) {
　　　　　　$scope.message = "In circle controller";
　　　});
</script>

في المثال السابق تم النظر في النقاط التالية-

  • نحن نصنف قيمة النموذج في

  • نحن فيcircleControllerفي وحدة التحكمcircleControllerفي وحدة التحكم الخاصة بناعندما يكون، سيستخدم الرسالة المغطاة.

مثال عبر الإنترنت

هذا المثال يظهر استخدام جميع التعليمات المذكورة أعلاه.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Forms</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS Scope(مجال)</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="shapeController">
　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　
　　　　　　　　　<div ng-controller="circleController">
　　　　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　</div>
　　　　　　　　　
　　　　　　　　　<div ng-controller="squareController">
　　　　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　</div>
　　　　　　</div>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller("shapeController", function($scope) {
　　　　　　　　　　　　$scope.message = "مستشار شكل";
　　　　　　　　　　　　$scope.type = "Shape";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("circleController", function($scope) {
　　　　　　　　　　　　$scope.message = "مستشار دائرة";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("squareController", function($scope) {
　　　　　　　　　　　　$scope.message = "مستشار مربع";
　　　　　　　　　　　　$scope.type = "Square";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
اختبار و‹/›

أظهر النتائج

افتح ملف في متصفح الويبtestAngularJS.htmوأنظر إلى النتائج.

خدمة AngularJS (Service) عرض AngularJS