Angularjs Dersleri - #6 $rootScope Nedir ?

angularjsyoutube

2 yıl önce 0 yorum

Merhaba bugünkü konu şu başlıklar altında işlenmiş

  • $rootScope
  • ng-hide / ng-show
  • ng-focus

$rootScope Nedir ?

$scope bildiğiniz gibi sadece bulunduğu controller'ın altında kullanılabiliyordu. Peki biz aynı değişkenleri farklı controllerlarda kullanmak istersek ? Burada ise bizim imdadımıza $rootScope yetişiyor. Örnek olarak title diye bir değişkenimiz var ve bunu bir üst controller'da kullamayız. 

<!DOCTYPE html>
<html lang="en" ng-app="proje">
<head>
	<meta charset="UTF-8">
	<title>Proje</title>
	<script src="resources/angular.min.js"></script>
	<script src="app.js"></script>

	<script>
		Proje.controller('UstCtrl', function($rootScope){

		});

		Proje.controller('AltCtrl', function($scope){
			$scope.title = "AltCtrl Başlık";
		})
	</script>
</head>
<body>
	<div ng-controller="UstCtrl">
		Üst : {{title}} <br>
		<div ng-controller="AltCtrl">
			Alt : {{title}} <br>
		</div>
	</div>
	
</body>
</html>

Gördüğünüz üzere "Üst: " diyerek boş verdi bunun yerine $rootScope.title diye kullansaydık. O zaman çalışırdı.

$rootScope.title = "AltCtrl Başlık";

ng-hide / ng-show

ng-hide directivine girilen koşul true ise gizler,

ng-show directivine girilen koşul true ise gösterir, Örnek: 

<div ng-hide="true">Gizlenir</div>
<div ng-show="true">Gösterilir</div>
<div ng-hide="false">Gösterilir</div>
<div ng-show="false">Gizlenir</div>

ng-focus / ng-blur

ng-focus nesneye odaklandığı an tetiklenir. ng-blur odak kayıp olduğunda tetiklenir. Örneğin bir nesneye odakladığında işlem yapıp kaybettiğinde işlem yapmak istiyorsak.

<!DOCTYPE html>
<html lang="en" ng-app="proje">
<head>
	<meta charset="UTF-8">
	<title>Proje</title>
	<script src="resources/angular.min.js"></script>
	<script src="app.js"></script>

	<script>
		Proje.controller('AppCtrl', function($scope){
			$scope.focus = function () {
				$scope.yazi = "odakladın";
			};
			$scope.blur = function() {
				$scope.yazi = "odak gitti";
			}
		});
	</script>
</head>
<body ng-controller="AppCtrl">
	<input type="text" placeholder="Bana odaklan" ng-focus="focus()" ng-blur="blur()">
	{{yazi}}
</body>
</html>

Bugünkü ders bu kadardı diğer derste görüşmek üzere :)

Düşündüklerin nedir ?

Abdurrahman Eker

(1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?