Table des matières

Directives

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

Il y a quatre types de directives:

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 =?1) 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

À lire