Harun Özer


Proje veya dijital katalog yaptırmak için
iletişim formu doldurabilirsiniz..

<< Microsoft.ACE.OLEDB.12.0 provider is not registered windows application | Nodejs nedir>>

AngularJS custom directive

Yazar harunozer 22 July 2014

AngularJS custom directive Directive elementin yorumlanması gibi düşünülebilinir. Directiveler modüller üzerine kayıtlıdır. AngularJS de kendi directive lerimizi tanımlayabiliriz. Böylece DOM elemanlarına istediğimiz davranışları ekleyebiliriz.

AngularJS nin kendi directiveleri küçük harfe duyarlı ve ng ile başlayan şekildedir. Custom directive yazarken directive isimlendirmesinde her büyük harften önce “–“, “:”, “_” karakterlerinden birisi kullanılır. Custom directive; element adı, özellik adı, class adı ve comment eşleşmesi ile tanımlanabilir. AngularJS de custom directive e parametre gönderilebilir, controller daki değerler kullanılabilir template belirtilebilir.

Şimdi basit bir directive tanımlayalım. Yazacağımız directive sadece “benim directivem” yazsın.

 

angular.module('myApp', ['myApp.controllers']);

var myApp = angular.module('myApp.controllers', []);

myApp.controller('testCtrl', function($scope) {

            $scope.ad = '<<Harun OZER>>';

});

myApp.directive('benimDirectivem', function() {

            return {

                        restrict: 'AEC'

                        ,template:"DRECTV TEMPLATE {{ad}}."

            }

});

 

Burada benimDirectivem adında bir directive tanımlıyoruz. D büyük harfle yazıldığı için kullanılırken benim-directvem, benim:directivem, benim_directivem, benim-directivem şekillerinde kullanılabilir. restrict ile verilen değer directive nin ne ile eşleşeceğini belirtir. restrict özelliği;

A: Attirbute adı

E: Element adı

C: Class adı

Birden fazla değer de setlenebilir. AE veya AEC gibi.

Template özelliği ise directive yerine koyulacak html dir. Burada controller daki nesneler de kullanılabilinir. Yukarıdaki tanımlı directive aşağıdaki şekillerde kullanılabilir.

 

<div ng-app="myApp">

            <div ng-controller="testCtrl">

                        benim-directivem ATR: <div benim-directivem></div><br/>

                        benim-directivem ELM: <benim-directivem></benim-directivem><br/>

                        benim-directivem CLS: <div class="benim-directivem"></div><br/>

            </div>

</div>

 

Template olarak dosya kullanmak daha kullanışlıdır. Bunun için templateUrl özelliği kullanılır. Template de yazdığımız html i mydirective.html dosyası olarak ana dizine kaydedelim ve template özelliği yerine templateUrl özelliğine ‘mydirective.html’ verelim. Böylece template yolunu verdiğimiz html dosyasından gelecektir.

myApp.directive('benimDirectivem', function() {

            return {

                        restrict: 'AEC'

                        ,templateUrl: '/mydirective.html'

            }

});

Sadece directive de kullanılacak olan değerleri parametre olarak vermek performans açısından daha iyi olacaktır. Bunun için directive tanımlamamızda scope nesnesi tanımlanır. Bu özelliğin de birkaç kullanım şekli vardır.

= ile gönderilen parametreler directive içine referans olarak gönderilir. Yani modeldeki değişiklikler directive ye yansır, directivedeki değişiklikler de modele yansır.

@ ile gönderilen parametreler tek değerdir. Nesne değildir.

& ile de function parametre olarak gönderilebilir.

angular.module('myApp', ['myApp.controllers']);

 

JS:

var myApp = angular.module('myApp.controllers', []);

myApp.controller('testCtrl', function($scope) {

    $scope.ad = '<<Harun OZER>>';

    $scope.clickevent=function(){

        alert("asd")

    };

    $scope.myobject={

        dt:'01/01/1989'

        ,mail:'harunozer@hotmail.com.tr'

        ,web:'http://harunozer.com'

    };

});

myApp.directive('paramDirective', function() {

    return {

        restrict: 'AEC'

        ,scope: {

            prmobj: '='

            ,pr:'@'

            ,click:'&'

        }

        ,template: '<a href ng-click="click(prmobj);"> dt: {{prmobj.dt}}<br/>mail:{{prmobj.mail}} <br/>pr:{{pr}} </a>'

    }

});

 

Html:

<div ng-app="myApp">

            <div ng-controller="testCtrl">

        param directive: <div param-directive prmobj="myobject" pr="{{myobject.web}}" click="clickevent()"></div><br/>

            </div>

</div>

 

http://jsfiddle.net/harunozer/kPAUT/2/

Tam Sayfa
Tags angularJS,
Kategoriler AngularJS
İşlemler
Bu Makale 34  Kez Beğenildi.
İsim :    
e-Mail :    
Web Site :  
İmage :  
Güvenlik Kodu :  

Güvenlik Resmi
Resmi Yenile
    
Yorum :  
Tasarım Desenleri ve Mimarileri