# AngularJS directives

# definition

the-hitchhikers-guide-to-the-directive/

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

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();

  }

 }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# existing directives

# ng-grid

ng-grid site doc

select directive in a cell :

plunkr demo.

Related to : editable-nggrid-with-both-dropdowns-and-selects

typehead directive in a cell : issue 435

plunkr demo

# tag-list

# l18n

# ng-model

# angular-ui

bootstrap-3-with-angularjs

# ng-cookies

# AngularJS feature flipping

angular-feature-toggle : github.com/yairhaimo