ورود به کارتابل مشتریان وب مهراز
scope در AngularJS
یادگیری AngularJSscope ارتباط بین کنترلر و HTML را ایجاد می کند.
scope یک شی می باشد که امکان دسترسی و کار با متغیر ها و متد ها را فراهم می کند.
scope برای هر دو بخش view و controller در دسترس می باشد.
چگونه از scope در AngularJS استفاده کنیم؟
زمانی که یک کنترلر را در برنامه AngularJS خود ایجاد می کنید ، شما یک شی scope$ را به عنوان یک آرگومان به آن ارسال میکنید :
مشخصه ای که در کنترلر ساخته می شود ، میتواند به (html) view هم مراجعه داشته باشد.
<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 و کنترلر را می تواندد از آن استفاده کنند.
<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 هر تکرار به شی در حال تکرار خودش دسترسی دارد:
<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 جاری را انتخاب می کند.
<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> 
نظر شما
>