09_AngularJs_CustomDirectives

Merhaba arkadaşlar, bu yazımda Custom Directives konusunu anlatacağım. Örneğin AngularJS’in kendi direktifleri ng ile başlayan şekildedir. Yani daha ayrıntılı anlatmak gerekirse daha önceki derslerimizde gördüğümüz ng-show gibi direktifleri kendimiz oluşturacağız. Şimdi örnek üzerinden konuyu anlatalım:

İndex.html

<html>
   <head>
    <script type="text/javascript" src="../resources/js/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
   </head>
   <body>
      <div ng-app = "mainApp" ng-controller = "StudentController">
         <student-person name = "person1"></student-person><br/>
         <student-person name = "person2"></student-person>
      </div>
   </body>
</html>

<html>

<head>

</head>

<body>

<student-person name = "person1"></student-person><br/>

<student-person name = "person2"></student-person>

</div>

</body>

</html>

ng-app direktifi kullanılarak projemizin angularjs projesi olduğunu tanımladık. Görüldüğü gibi <student-person> tagları şeklinde yeni direktifler tanımlanmış ve projede kullanılmış. Şimdi bu direktiflerin nasıl oluştuğunu anlamak için app.js dosyamıza bakalım.

App.js

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

mainApp.directive('studentPerson', function() {
   var directive = {};
   directive.restrict = 'E';
   directive.template = "Öğrenci: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
   directive.scope = {
      student : "=name"
   }
   return directive;
});

mainApp.controller('StudentController', function($scope) {
   $scope.person1 = {};
   $scope.person1.name = "Furkan KOÇ";
   $scope.person1.rollno  = 1;

   $scope.person2 = {};
   $scope.person2.name = "Alperen Emir";
   $scope.person2.rollno  = 2;
});

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

mainApp.directive('studentPerson', function() {

var directive = {};

directive.restrict = 'E';

directive.template = "Öğrenci: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";

directive.scope = {

student : "=name"

}

return directive;

});

mainApp.controller('StudentController', function($scope) {

$scope.person1 = {};

$scope.person1.name = "Furkan KOÇ";

$scope.person1.rollno = 1;

$scope.person2 = {};

$scope.person2.name = "Alperen Emir";

$scope.person2.rollno = 2;

});

mainApp isminde değişken oluşturuldu ve angular modülümüz tanımlandı. Yeni bir direktif oluşturmak istiyorsak directive() metodunu kullanmamız gerekir. Direktive() metodu bir nesne döndürmektedir. Bu nesnenin bazı özellikleri mevcuttur.

Restrict
Scope
Template veya templateUrl
Link
Controller

Restrict => direktifin tipini belirler. Direktiflerin 4 adet tipi vardır. Bunlar:

‘A’=> Attribute tipinde direktif
‘E’=> Element tipinde direktif
‘C’=> Class tipinde direktif
‘M’=>Yorum tipinde direktif

Scope => Direktifin kapsam alanını belirler.

Veriler ‘@’ String değişkeni kullanılarak dizge olarak geçirilir.
Veriler ‘=’ String değişkeni kullanılarak nesne olarak geçirilebilir.
Veriler ‘&’ String değişkeni kullanılarak bir fonksiyon olarak aktarılır.

Örnek olarak:

someObject: '=' (two-way data binding)

someString: '@' ({{}})

someExpression: '&' (hideDialog())

someObject: '=' (two-way data binding)

someString: '@' ({{}})

someExpression: '&' (hideDialog())

Template => Direktifler DOM üzerine yerleştirildiklerinde görüntülenmek isteniyorsa düz olarak HTML kodu yazılabilir. Yada herhangi bir dosyadaki *.html uzantılı dosyalar templateUrl sayesinde eklenebilir.

Link => Direktifin link() metodunu direktifin DOM elementi ile temasa geçtiğinde init metot olarak bir kere çalışır.

Controller => Direktifin veri alışverişi yapmasını sağlar.

Bu yazımı burada bitiriyorum. Diğer yazılarımda görüşmek üzere…

Bir cevap yazın Cevabı iptal et