- Direktiflerin Tanımlanması
- Direktif Restriction Yapısı
- Scope Ayrımı
- Ayrılmış Scope Tarafına Erişim
- Direktif Kalıtımı (Inheritance)
Angularjs direktif serisinin beşinci bölümü direktiflerin kalıtımı(directive inheritance) hakkında olacak.
Direktif kalıtımı, mevcut bir direktifin özelliğini kullanarak yeni bir direktif oluşturmak istediğimizde kullanabileceğimiz bir özelliktir.
Direktiflerin kalıtımı controller birimlerinin paylaşımı şeklinde olmaktadır. Alt direktifler, üst direktiflerin controller nesnelerine erişebilir.
Bu durumu daha iyi özetlemek amacıyla bir örnek üzerinden devam edelim. Örnek uygulamamızda araçları temsil eden vehicle isimli bir ana direktif olsun. Otobüs ve taksiler birer araç olduğundan onları da alt direktifler olarak düşünebiliriz.
<vehicle>
<bus></bus>
<car></car>
</vehicle>
Örnek uygulamamızda bus ve car direktifleri yolcu taşıyan araçları temsil etmektedir. Her araca yolcu bindiğinde vehicle isimli ana direktif üzerinde araçların toplam yolcu sayısının kaydı güncellenmektedir.
angular.module("app", [])
.directive("vehicle", function(){
return {
restrict: "E",
controller: function($scope){
var self = this;
self.totalPassenger = 0;
self.loadPassenger = function(count){
self.totalPassenger += count;
}
$scope.totalPassenger = function(){
return self.totalPassenger;
}
}
}
})
vehicle direktifinin self.loadPassenger() metodu, diğer alt direktifler tarafından yolcu sayısını güncellemek için kullanılacak olan metottur.
angular.module("app")
.directive("bus", function(){
return {
restrict: "E",
require: "^vehicle",
scope: {},
link: function(scope, element, ettributes, vehicleController) {
scope.dailyPassengersCount = 0;
setInterval(function(){
scope.$apply(function(){
var loadedPassengers = Math.floor((Math.random() * 15) + 1)
scope.dailyPassengersCount += loadedPassengers;
vehicleController.loadPassenger(loadedPassengers);
})
}, 2000);
},
template: '<span>Bus Total Passengers: {{dailyPassengersCount}}</span>'
}
})
bus direktifine require:”^vehicle” eklemesi yapılarak bir üst direktifin vehicle olduğunu bildiriyoruz. Direktifin link() fonksiyonuna dikkat edecek olursak dördüncü parametresi vehicleController olarak belirlenmiştir. Bu controller, kalıtımı yapılan direktife ait controller nesnesidir.
bus direktifi 2 saniyede bir rastgele olarak yolcu sayısını arttırmaktadır. bus direktifi kendi günlük toplam yolcu sayısını arttırırken, bir üst direktif olan vehicle direktifinin de toplam yolcu sayısını güncellemektedir.
Aynı şekilde car direktifini de aşağıdaki gibi tanımlayabiliriz.
angular.module("app")
.directive("car", function(){
return {
restrict: "E",
require: "^vehicle",
link: function(scope, element, ettributes, vehicleController) {
scope.dailyPassengersCount = 0;
setInterval(function(){
scope.$apply(function(){
var loadedPassengers = Math.floor((Math.random() * 4) + 1);
scope.dailyPassengersCount += loadedPassengers;
vehicleController.loadPassenger(loadedPassengers);
})
}, 1500);
},
template: '<span>Car Total Passengers: {{dailyPassengersCount}}&</span>'
}
})
Çalışan uygulamayı şu şekilde görebiliriz.
