$scope ve $rootScope ilişkisi |

Merhabalar

Bu yazımda AngularJS’in birbiriyle ilişkili iki önemli nesnesi olan $scope ve $rootScope’dan bahsedeceğim.

Scope kavramı uygulamalar için bir kapsamı ifade eder.Bu kapsam AngularJS için controller ve view’in birbiriyle konuşmasını sağlar.

$scope

$scope nesnesi üsttede belirttiğim gibi controller ve view arasındaki iletişimi sağlar.Temelde,$scope controllerdan aldığı verileri DOM elementlerine bağlar

$rootScope

$rootScope en üst kapsamdır.Bir uygulamada $rootScope’a yüklenen veri tüm controller’lar içerisinden erişilebilir.Yani $rootScope bir global değişken olarak davranır diyebiliriz.Tüm $scope’lar $rootScope’un çocuğudur.

Kısa bir örnekle yazıyı tamamlayalım.

<!doctype html>
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl1" style="border:2px solid red; padding:5px">
 Hello {{msg}}!
 <br />
 Hello {{name}}!
 (rootScope)
</div>
<br />
<div ng-controller="Ctrl2" style="border:2px solid black; padding:5px">
 Hello {{msg}}!
 <br />
 Hey {{myName}}!
 <br />
 Hi {{name}}! (rootScope)
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script>
 var app = angular.module('myApp', []);
 
 app.controller('Ctrl1', function ($scope, $rootScope) {
 $scope.msg = 'World';
 $rootScope.name = 'AngularJS';
 });
 
 app.controller('Ctrl2', function ($scope, $rootScope) {
 $scope.msg = 'from Ctrl2';
 $scope.myName = $rootScope.name;
 });
</script>
</body>
</html>

<!doctype html>

<html>

Hello {{msg}}!

<br />

Hello {{name}}!

(rootScope)

</div>

<br />

Hello {{msg}}!

<br />

Hey {{myName}}!

<br />

Hi {{name}}! (rootScope)

</div>

var app = angular.module('myApp', []);

app.controller('Ctrl1', function ($scope, $rootScope) {

$scope.msg = 'World';

$rootScope.name = 'AngularJS';

});

app.controller('Ctrl2', function ($scope, $rootScope) {

$scope.msg = 'from Ctrl2';

$scope.myName = $rootScope.name;

});

</script>

</body>

</html>

Kodun çalışır haline buradan ulaşabilirsiniz.

Bir cevap yazın Cevabı iptal et