Directives

Les directives sont une façon de donner de nouvelles fonctionnalités au HTML.

Il y a quatre types de directives:

E - Élement → <sg-element />.
A - Attribut → <div sg-element></div>.
C - Classe → <div class="sg-directive"></div>.
M - Comment → <!– directive: my-directive exp –>.

Généralement seulement les types E et A sont utilisés.

Il est conseillé de préfixer les directives que l'on crée. Angular a préfixé ses directives avec ng-, on peut choisir tout autre combinaison, exemple sg-nom-de-la-directive.

Support de IE

Pour supporter les vieilles versions de IE, il faut utiliser des directives de type attribut. Aussi, utiliser le Polyfill JSON.stringify.

Types de bindings

Symbol	Utilisation
`@`	Lecture seule
`=`	Lecture/écriture (two-way binding)
`&`	Method Binding

Dans le binding =, on peut utiliser =?¹⁾ pour le rendre optionel.

Scope

Scope d'un élément

Dans une directive, on peut avoir accès au scope d'un élément (autre au scope de la directive elle-même, mais un élément tout de même à l'intérieur de celle-ci).

element.on('click', 'input', function(event) {
    var inputScope = angular.element(this).scope();
});

Exemples de directives

Pourcent

myApp.directive("percent", function($filter){
    var p = function(viewValue){
        var m = viewValue.match(/^(\d+)\/(\d+)/);
        if (m != null)
          return $filter('number')(parseInt(m[1])/parseInt(m[2]), 2);
        return $filter('number')(parseFloat(viewValue)/100, 5);
    };
 
    var f = function(modelValue){
        return $filter('number')(parseFloat(modelValue)*100, 2);
    };
 
    return {
        require: 'ngModel',
        link: function(scope, ele, attr, ctrl){
            ctrl.$parsers.unshift(p);
            ctrl.$formatters.unshift(f);
        }
    };
});

Source : JSFiddle

Table des matières