scope در AngularJS

یادگیری AngularJS

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

تاریخ و ساعت انتشار : شنبه 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 مقاله درس بعدی درس قبلی

نظر شما

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

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.