# AngularJS directives

# definition

var myModule = angular.module(...);
myModule.directive('directiveName', function (injectables) {
  return {
    restrict: 'A',
    template: '<div></div>',
    templateUrl: 'directive.html',
    replace: false,
    priority: 0,
    transclude: false,
    scope: false,
    terminal: false,
    require: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# params on directives

Les différentes solutions pour gérer les paramètres d'une directive sur ce gist.

# compile

angularjs-append-html-to-an-element-in-directive plunkr demo

# link

intercept user click

return {
    restrict: 'A',
    scope: true,
    link: function (scope, elem) {
        elem.bind('click', function () {
            // impl ...
        });
    }
};

1
2
3
4
5
6
7
8
9

# onDestroy and watchers

Une directive qui est détruite lève un event destroy.

Donc dans le controleur de la directive il faut écouter cet event :

scope.$on('$destroy', function() {
  console.log("destroy");
});

1
2
3

Pour le watcher, quand il est posé il retourne une fonction. Cet fonction détruit le watcher si elle est exécutée :

var unbindWatcher = $scope.$watch(
  "clickCount",
  function( newClickCount ) {

     console.log( "Watching click count." );

     if ( newClickCount >= 5 ) {

    $scope.isShowingFeedback = true;

    // Once the feedback has been displayed,
    // there's no more need to watch the change
    // in the model value.
    unbindWatcher();

  }

 }
);