فرق بین $scope و $rootscop در AngularJs
چهارشنبه 5 آبان 1395$rootscop برای تمامی کنترل ها قابل دسترسی است ، درحالی که $scope در یک کنترلر قابل دسترسی است . برای درک بهتر این مطلب میتوان این مقاله را مطالعه کنید .
مقدمه
ابتدا یک وب سایت خالی و یک فایل اسکریپت ایجاد می کنیم پس از آن فایل اسکیریپتی خود را به آن متصل می کنیم .
در داخل فایل اسکریپت ، یک تابع و یک خاصیت به نام redColour را با شی $scope مینویسیم.
کنترلر redColour رنگ قرمز را روی شی $scope تنظیم می کند و همین اتفاق برای کنترلر greenColourController نیز می افتد.
به علاوه در $scope شی، شی $rootscope را تزریق میکنیم و property رنگrootscope را تعیین میکنیم.
1. controller("redColourController", function ($scope, $rootScope) {
2. $scope.redColour = "Red Colour";
3. $rootScope.rootScopeColour = " Root Scope Colour";
4. })
و در آخر script.js را میبینیم :
var app = angular.module("Demo", []);
app.controller("redColourController",
function ($scope, $rootScope) {
$scope.redColour = "Red Colour";
$rootScope.rootScopeColour = "Root Scope Colour";
});
app.controller("greenColourController",
function ($scope) {
$scope.greenColour = "Green Colour";
});
حال، پروژه شما شامل یک فایل html می باشد .
برای انجام این کار یک عنصر div در قسمت body قرار میدهیم . یک ng-controller با نام redColourController میسازیم و مقدار هر خاصیت آن را نشان خواهیم داد .
کد :HTML
1. <!DOCTYPE html> 2. <html ng-app="Demo"> 3. <head> 4. <title></title> 5. <meta charset="utf-8" /> 6. <script src="scripts/angular.min.js"></script> 7. <script src="/script.js"></script> 8. </head> 9. <body> 10. <div ng-controller="redColourController"> 11. 12. Red Scope Colour : 13. Red Colour Controller : 14. Green Colour Controller : 15. </div> 16. </body> 17. </html>
در اینجا مقدار property را کپی میکنیم که ما میخواهیم نمایش بدهیم و از binding expression استفاده میکنیم.
1. <div ng-controller="redColourController">
2.
3. Red Scope Colour : {{rootScopeColour}}
4. Red Colour Controller : {{redColour}}
5. Green Colour Controller : {{greenColour}}
6. </div>
حال، greenColourController را در div زیر وارد می کنیم .
1. <div ng-controller="greenColourController">
2.
3. Red Scope Colour : {{rootScopeColour}} <br />
4. Grren Colour Controller : {{greenColour}} <br />
5. Red Colour Controller : {{redColour}}
6. </div>
تغییرات را save میکنیم و برنامه را اجرا میکنیم
خاصیت $rootscope color در دو عنصر div در دسترس است چون در شی $scope تعریف شده است .
Red Color Controller : {{redColour}} برای کنترلر رنگ قرمز در دسترس است و به همین دلیل خروجی ما به صورت قرمز نمایش داده می شود.
اما زمانی که شما خاصیت green color را در شی $scope تعریف می کنید ، آن در کنترلر red Color دردسترس نیست ، به همین دلیل ما در خروجی مقدار سبزی مشاهده نمی کنیم .
درحال حاضر ، هیچ مقدار نصبی برای کنترلرهای red و green وجود ندارد .حال می خواهیم به آنها رنگ بدهیم .
1. <span style="color:red" ng-show="greenColour == undefined"> 2. greenColour is undefined 3. </span>
در این قسمت از عنصر span برای نمایش رنگ استفاده کرده ایم و میخواهیم با استفاده از دایرکتیو ng-show یک codition-if بنویسیم که green color ، undefined است یا خیر و اگر شرط مورد نظر true باشد رنگ سبز نمایش داده شود .
این عمل را برای عنصر div دیگر انجام می دهیم .
1. <span style="color:green" ng-show="redColour == undefined"> 2. redColour is undefined 3. </span>
کد پایانی :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="/Script.js"></script>
</head>
<body ng-app="Demo">
<div ng-controller="redColourController">
Red Scope Colour : {{rootScopeColour}}
<br />
Red Colour Controller : {{redColour}}
<br />
Green Colour Controller : <span ng-show="greenColour == undefined" style="color:red"> greenColour is undefined</span>
<br />
</div>
<br />
<br />
<br />
<div ng-controller="greenColourController">
Red Scope Colour : {{rootScopeColour}}
<br />
Grren Colour Controller : {{greenColour}}
<br />
Red Colour Controller : <span ng-show="redColour == undefined" style="color:green">redColour is undefined</span>
<br />
</div>
</body>
</html>
حال تغییرات اعمال شده را ذخیره کرده و صفحه را دوباره بارگذاری می کنیم .
حال میتوان مقدارهای سبز و قرمز را مشاهده کنید .
آموزش angular
- AngularJs
- 2k بازدید
- 0 تشکر