formations/javascript/angular/creation-directives-3.md

851 B

.cadoles-slide-title[Création de directives (3/4)]

  • Ayant leur propre contrôleur, elles peuvent hériter du $scope de leur parent ou être en isolation.
  • En cas d'isolation, elles peuvent se lier de différentes manières avec le $scope de leur parent, notamment via leurs attributs.
<script>
  angular.module('myApp', [])
    .directive('helloWho', function() {
      return {
        restrict: 'E',
        template: 'Hello {{ whoOnScope }} !',

        scope: {
          'whoOnScope': '=whoAttr' // Les attributs sont normalisé, i.e. whoAttr -> "who-attr"
        },

        controller: function($scope) {
          // Faire quelque chose dans le controleur de notre nouvelle directive
        }

      };

    })
  ;
</script>

<!-- Usage -->

<hello-who who-attr="'World'"></hello-who> <!-- Affiche "Hello World !" -->