HTML5 ile beraber etiketlerin içerisine eklenen ve directive adını verdiğimiz alt özellikler bir çok işlemin kolaylaşmasını sağlamıştır. Örneğin:

<input type="submit" value="Gönder" disabled />

Yukarıdaki input etiketininin içerisindeki disabled directive'i, nesnenin üzerine tıklamamıza engel olmaktadır.

Angular JS aracılığıyla kendi JavaScript fonksiyonlarınızı directive olarak kullanmanız mümkündür.

HTML

<div ng-app="myApp">
<div ozel-directive></div>
<div yeni-directive></div>
</div>

JS

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

app.directive("ozelDirective", function () {
return {
template: "Özel directive ile oluşturulmuştur."
};
});

app.directive("yeniDirective", function () {
return {
template: "Yeni directive ile oluşturulmuştur."
};
});

Yukarıda tanımlanan ozel-directive ve yeni-directive alt özellikleri, AngularJS'nin template özelliği ile çalıştırılmıştır ve ekran çıktısı aşağıdaki gibi olur.

Özel directive ile oluşturulmuştur.

Yeni directive ile oluşturulmuştur.

Bu sayade istediğiniz JavaScript'i ya da AngulaJS Controller'ını directive olarka kullanmanız mümkün olmaktadır.