AngularJS Direktifleri (Directive)

Bu yazımızda AngularJS direktiflerini tanımlayıp kullanım alanlarını inceleyeceğiz.

    • ng-app: Bir önceki yazımızda açıkladığımız gibi AngularJS’in etki alanını belirlemek için kullanılır. Örnekte bütün sayfanın değil de sayfa içerisinde bulunan bir div’in etkilenmesi durumunu incelersek:
<!DOCTYPE html>
<html lang="en">
<head>
	<title> AngularJS - Directive</title>
</head>
<body>



<div ng-app>
	...
</div>


</body>
</html>
  • ng-bind:  {{ value }} şeklinde kullanımının aynısıdır. Verilen değeri Bind eder.

<div ng-app>
		
	
<li ng-bind="6 + 1"></li>

</div>

  • ng-model: Form elemanlarında oluşan değişiklikleri incelemek için kullanılır.

External Javascript dosyası oluşturup aşağıdaki gibi düzenleyelim:

Project.controller('MainController', function($scope){
	$scope.user= {
		name: "",
		password: ""
	};

	$scope.login = function (user) {
		if (user.name == "") {
			alert("Kullanıcı adı boş olamaz.");
		} else if (user.password == "") {
			alert("Kullanıcı şifresi boş olamaz.");
		} else {
			alert("Alanlar dolduruldu.");
		}
	};
})

HTML sayfasını da aşağıdaki gibi düzenleyip çalıştırıp değişiklik durumunu inceleyelim.

Username: <input type="text" ng-model="user.name"> 
Password: <input type="password" ng-model="user.password"> 
<button ng-click="login(user)">Login</button>

JS dosyasında username ve password’ün ilk değerler verilerek undefined hatası engellenmiştir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir