scope در AngularJS

یادگیری AngularJS

تعداد بازدید : 1694

تاریخ و ساعت انتشار : شنبه 25 فروردین 1397 13:05

scope ارتباط بین کنترلر و HTML را ایجاد می کند.

scope یک شی می باشد که امکان دسترسی و کار با متغیر ها و متد ها را فراهم می کند.

scope برای هر دو بخش view و controller در دسترس می باشد.

چگونه از scope در AngularJS استفاده کنیم؟

زمانی که یک کنترلر را در برنامه AngularJS خود ایجاد می کنید ، شما یک شی scope$ را به عنوان یک آرگومان به آن ارسال میکنید :

مشخصه ای که در کنترلر ساخته می شود ، میتواند به (html) view هم مراجعه داشته باشد.

scope در AngularJS

<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$ درکنترلر اضافه می کنید در قسمت view (html) هم به این مشخصه ها دسترسی خواهید داشت.

در قسمت view شما نیازی به پیشوند scope$ نخواهید داشت. شما کافیست نام مشخصه مورد نظر را به کار ببرید ماندد {{ carname }}

فهمیدن scope

اگر ما یک برنامه AngularJS را در نظر بگیریم که شامل :

View که همان بخش html می باشد.
Model که داده مورد نیاز است و در دسترس View قرار می گیرد.
Controller (کنترلر) که یک تابع JavaScript است و اعمل ایجاد / ویرایش / حذف / کنترل روی داده ها را انجام می دهد.

scope همان مدل ما خواهد بود.

scope یک شی JavaScript است که شامل متد ها و متغیر هایی است که هر دو بخش View و کنترلر را می تواندد از آن استفاده کنند.

scope در AngularJS

<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>

مشاهده مثال

scope خود را بشناسید

بسیار مهم است که بدانیم در هر لحظه کدام scope در حال اجرا می باشد.

در دو مثال بالا فقط یک scope وجود داشت ، بنابرین شناخت scope در حل اجرا مشکل ما نبود. اما برای برنامه ها بزرگ ، باید بدانیم چگونه scope ها و عملکرد آن ها را کنترل کنیم.

توضیح مثال زیر : زمانی که از دستور ng-reapat هر تکرار به شی در حال تکرار خودش دسترسی دارد:

scope در AngularJS

<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> به شی در حال تکرار خودش دسترسی دارد که در این مورد نوع آن رشته (string) است. که با استفاده از x مشخص شده است.

scope ریشه

تمامی برنامه ها یک rootscope$ دارند که سایر scope ها را روی عناصر HTML که شامل دستورات ng-app می باشند ، می سازند.

rootscope$ در کل برنامه در دسترس می باشد.

اگر یک متغیر دارای نام یکسان در هر دو scope جاری و rootscope باشد برنامه متغیر scope جاری را انتخاب می کند.

scope در AngularJS


<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>

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

scope در AngularJS

چگونه از scope در AngularJS استفاده کنیم؟

فهمیدن scope

scope خود را بشناسید

scope ریشه

علیرضا احمدی بابلانی

نظر شما

یادگیری AngularJS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

مقالات مرتبط