Tuto AngularJS

Créer une directive AngularJS

Comment créer une directive en AngularJS? Une directive AngularJS est une portion de code qui vas définir des règles à appliquer dans une balise HTML. La directive une fois créée est réutilisable dans l'ensemble de notre application.

Directive AngularJS exemple

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Appli Batman</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="lappli">
    <bat-mobile></bat-mobile>
    <script>
        var app = angular.module("lappli", []);
        app.directive("batMobile", function() {
            return {
                restrict : "E",
                template : "<span style=\"color:blue;\">Batman démarre la Batmobile</span>"
            };
        });
    </script>
</body>
</html>

Directive AngularJS exemple2

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Appli Batman3</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="lappli">
    <bat-mobile ng-transclude >test1</bat-mobile>
    <bat-mobile>test2</bat-mobile>
    <script>
        var app = angular.module("lappli", []);
        app.directive("batMobile", function() {
            return {
                restrict: 'E',// E=element, A=attribut, C=class et M=commentaire
                transclude: true,// Affiche test1 si true et batman3 si false
                template: '<span>{{superHero}}</span>',
                controller:function($scope, $element){
                    $scope.episode = "3";
                },
                link:function(scope, element,param){
                    scope.superHero = "batman " + scope.episode;
                }
            };
        });
    </script>
</body>
</html>