آموزش Scope در AngularJS

آموزش Scope در AngularJS

Scope را می‌توان به چند طریق تعریف کرد:

به قسمتی که HTML (view) و JavaScrip (Controller) را بهم پیوند می‌دهد ، Scope می‌گویند.

به یک object با ویژگی‌ها و متدهای قابل دسترس نیز Scope می گویند. Scope هم برای view و هم برای Controller قابل دسترس می‌باشد.

چگونه از Scope استفاده کنیم

زمانی که شما یک Controller در AngularJS ایجاد می‌کنید، یک object $scope به عنوان argument ایجاد می شود. در مثال زیر، ویژگی‌های ساخته شده در Controller ، می توانند به 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> <p> The property "carname" was made in the controller, and can be referred to in the view by using the {{ }} brackets. </p>

هرگاه به $scope در Controlle ویژگی‌هایی اضافه کنیم، view (HTML ) می‌تواند به این ویژگی‌هادسترسی داشته باشد. شما نباید از پیشوند $scope در view استفاده کنید بلکه فقط باید به نام آن ویژگی ارجاع دهید، به عنوان مثال باید به صورت {{carname}} بنویسید.

درک کردن Scope

یک برنامه کاربردی AngularJS شامل بخش های زیر می‌باشد:

View که شامل کدهای Html است.

Model که view مربوط به آن دسترسی دارد.

Controller که با استفاده از توابع JavaScript ، اطلاعات را ایجاد کند، تغییر دهد، حذف کند و یاکنترل کند.

Scope یک object با ویژگی‌ها و متدهایی است که هم برای view و Controller قابل دسترسی باشد.

به عنوان مثال، هر گاه شما در view تغییراتی ایجاد کنید، model و Controller Controller

<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> <p>When you change the name in the input field, the changes will affect the model, and it will also affect the name property in the controller.</p>

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

این نکته بسیار مهم است که شما بدانید از کدام Scope باید استفاده کنید. در دو مثال قبلی تنها یک Scope وجود داشت و شناختن Scope کار دشواری نبود اما برای برنامه‌های بزرگتر Section‌هایی از HTML DOM وجود دارد که برای هر Scope یکتای خود قابل دسترسی می‌باشد.

به عنوان مثال، هرگاه از دایرکتیو ng- peat استفاده می‌کنیم، هر تکرار به همان object تکرار شده دسترسی دارد.

<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> <p>The variable "x" has a different value for each repetition, proving that each repetition has its own scope.</p>

هر المان به همان object تکرارشونده دسترسی دارد. در این مورد یک رشته با x نشان داده شده است .

Scope ریشه

هر برنامه ی کاربردی، یک $rootScope دارد که Scope ساخته شده در المان Html آن دارای دایرکتیو ng-app می‌باشد. rootScope در کل برنامه قابل دسترسی است و اگر یک متغیر دارای نام های مشابه در Current Scope و rootScope باشد، برنامه یکی از آنها را استفاده می‌کند.

به عنوان مثال، یک متغیر به نام color هم در Controller Scope و هم در rootScope وجود دارد.

<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> <p>Notice that controller's color variable does not overwrite the rootScope's color value.</p> </body>



نظرات کاربران



عبارت امنیتی : حاصل 5 × 1 می شود :
متن پیام :