Add directives from directive in AngularJS

Question

I m trying to build a directive that takes care of adding more directives to the element it is declared on  For example  I want to build a directive that takes care of adding datepicker  datepicker-language and ng-required  true    If I try to add those attributes and then use  compile I obviously generate an infinite loop  so I am checking if I have already added the needed attributes   angular module  app      directive  superDirective   function   compile   injector        return         restrict   A         replace  true        link  function compile scope  element  attrs            if  element attr  datepicker         check           return                    element attr  datepicker    someValue            element attr  datepicker-language    en               some more          compile element  scope                          Of course  if I don t  compile the element  the attributes will be set but the directive won t be bootstrapped   Is this approach correct or am I doing it wrong  Is there a better way to achieve the same behavior   UDPATE  given the fact that  compile is the only way to achieve this  is there a way to skip the first compilation pass  the element may contain several children   Maybe by setting terminal true   UPDATE 2  I have tried putting the directive into a select element and  as expected  the compilation runs twice  which means there is twice the number of expected options

User · Accepted Answer

In cases where you have multiple directives on a single DOM element and where the order in which they’re applied matters, you can use the priority property to order their application. Higher numbers run first. The default priority is 0 if you don’t specify one.

EDIT: after the discussion, here's the complete working solution. The key was to remove the attribute: element.removeAttr("common-things");, and also element.removeAttr("data-common-things"); (in case users specify data-common-things in the html)

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, //this setting is important, see explanation below
      priority: 1000, //this setting is important, see explanation below
      compile: function compile(element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

Working plunker is available at: http://plnkr.co/edit/Q13bUt?p=preview

Or:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function link(scope,element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

DEMO

Explanation why we have to set terminal: true and priority: 1000 (a high number):

When the DOM is ready, angular walks the DOM to identify all registered directives and compile the directives one by one based on priority if these directives are on the same element. We set our custom directive's priority to a high number to ensure that it will be compiled first and with terminal: true, the other directives will be skipped after this directive is compiled.

When our custom directive is compiled, it will modify the element by adding directives and removing itself and use $compile service to compile all the directives (including those that were skipped).

If we don't set terminal:true and priority: 1000, there is a chance that some directives are compiled before our custom directive. And when our custom directive uses $compile to compile the element => compile again the already compiled directives. This will cause unpredictable behavior especially if the directives compiled before our custom directive have already transformed the DOM.

For more information about priority and terminal, check out How to understand the `terminal` of directive?

An example of a directive that also modifies the template is ng-repeat (priority = 1000), when ng-repeat is compiled, ng-repeat make copies of the template element before other directives get applied.

Thanks to @Izhaki's comment, here is the reference to ngRepeat source code: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js

User · Answer

There was a change from 1 3 x to 1 4 x   In Angular 1 3 x this worked   var dir  ng IDirective         restrict   A       require    select    ngModel        compile  compile      function compile tElement  ng IAugmentedJQuery  tAttrs  transclude        tElement append   lt option value    gt --- Kein --- lt  option gt          return function postLink scope  DirectiveScope  element  ng IAugmentedJQuery  attributes  ng IAttributes            attributes  ngOptions      a ID as a Bezeichnung for a in akademischetitel           scope akademischetitel   AkademischerTitel query              Now in Angular 1 4 x we have to do this   var dir  ng IDirective         restrict   A       compile  compile      terminal  true      priority  10      function compile tElement  ng IAugmentedJQuery  tAttrs  transclude        tElement append   lt option value    gt --- Kein --- lt  option gt         tElement removeAttr  tq-akademischer-titel-select        tElement attr  ng-options    a ID as a Bezeichnung for a in akademischetitel         return function postLink scope  DirectiveScope  element  ng IAugmentedJQuery  attributes  ng IAttributes              compile element  scope           scope akademischetitel   AkademischerTitel query               From the accepted answer  https   stackoverflow com a 19228302 605586 from Khanh TO

User · Answer

You can actually handle all of this with just a simple template tag  See http   jsfiddle net m4ve9  for an example  Note that I actually didn t need a compile or link property on the super-directive definition   During the compilation process  Angular pulls in the template values before compiling  so you can attach any further directives there and Angular will take care of it for you   If this is a super directive that needs to preserve the original internal content  you can use transclude   true and replace the inside with  lt ng-transclude gt  lt  ng-transclude gt   Hope that helps  let me know if anything is unclear  Alex

User · Answer

I wanted to add my solution since the accepted one didn t quite work for me   I needed to add a directive but also keep mine on the element   In this example I am adding a simple ng-style directive to the element  To prevent infinite compile loops and allowing me to keep my directive I added a check to see if what I added was present before recompiling the element   angular module  some directive        directive  someDirective      compile  function  compile       return           priority  1001          controller     scope     element     attrs     transclude   function  scope   element   attrs   transclude                    controller code here                      compile  function element  attributes               var compile   false                 check to see if the target directive was already added             if  element attr  ng-style                       add the target directive                 element attr  ng-style      width   200px                      compile   true                            return                   pre  function preLink scope  iElement  iAttrs  controller                        post  function postLink scope  iElement  iAttrs  controller                        if compile                            compile iElement  scope

User · Answer

Try storing the state in a attribute on the element itself  such as superDirectiveStatus  true   For example   angular module  app      directive  superDirective   function   compile   injector        return         restrict   A         replace  true        link  function compile scope  element  attrs            if  element attr  datepicker         check           return                    var status   element attr  superDirectiveStatus            if  status      true                  element attr  datepicker    someValue                 element attr  datepicker-language    en                    some more              element attr  superDirectiveStatus   true                  compile element  scope                                      I hope this helps you

User · Answer

Here s a solution that moves the directives that need to be added dynamically  into the view and also adds some optional  basic  conditional-logic  This keeps the directive clean with no hard-coded logic   The directive takes an array of objects  each object contains the name of the directive to be added and the value to pass to it  if any    I was struggling to think of a use-case for a directive like this until I thought that it might be useful to add some conditional logic that only adds a directive based on some condition  though the answer below is still contrived   I added an optional if property that should contain a bool value  expression or function  e g  defined in your controller  that determines if the directive should be added or not   I m also using attrs  attr dynamicDirectives to get the exact attribute declaration used to add the directive  e g  data-dynamic-directive  dynamic-directive  without hard-coding string values to check for    Plunker Demo   x000D   x000D  angular module  plunker     ui bootstrap    x000D       controller  DatepickerDemoCtrl      scope   x000D          function  scope    x000D               scope dt   function     x000D                  return new Date    x000D                 x000D               scope selects    1  2  3  4   x000D               scope el   2  x000D   x000D                 For use with our dynamic-directive x000D               scope selectIsRequired   true  x000D               scope addTooltip   function     x000D                  return true  x000D                 x000D            x000D         x000D       directive  dynamicDirectives      compile   x000D          function  compile    x000D               x000D               var addDirectiveToElement   function scope  element  dir    x000D                  var propName  x000D                  if  dir if    x000D                      propName   Object keys dir  1   x000D                      var addDirective   scope  eval dir if   x000D                      if  addDirective    x000D                          element attr propName  dir propName    x000D                        x000D                    else      No condition  just add directive x000D                      propName   Object keys dir  0   x000D                      element attr propName  dir propName    x000D                    x000D                 x000D               x000D              var linker   function scope  element  attrs    x000D                  var directives   scope  eval attrs dynamicDirectives   x000D           x000D                  if   directives     angular isArray directives     x000D                      return  compile element  scope   x000D                    x000D                  x000D                     Add all directives in the array x000D                  angular forEach directives  function dir   x000D                      addDirectiveToElement scope  element  dir   x000D                      x000D                   x000D                     Remove attribute used to add this directive x000D                  element removeAttr attrs  attr dynamicDirectives   x000D                     Compile element to run other directives x000D                   compile element  scope   x000D                 x000D           x000D              return   x000D                  priority  1001     Run before other directives e g   ng-repeat x000D                  terminal  true     Stop other directives running x000D                  link  linker x000D                 x000D            x000D          x000D   lt  doctype html gt  x000D   lt html ng-app  plunker  gt  x000D   x000D   lt head gt  x000D       lt script src    code angularjs org 1 2 20 angular js  gt  lt  script gt  x000D       lt script src    angular-ui github io bootstrap ui-bootstrap-tpls-0 6 0 js  gt  lt  script gt  x000D       lt script src  example js  gt  lt  script gt  x000D       lt link href    netdna bootstrapcdn com twitter-bootstrap 2 3 1 css bootstrap-combined min css  rel  stylesheet  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D       lt div data-ng-controller  DatepickerDemoCtrl  gt  x000D   x000D           lt select data-ng-options  s for s in selects  data-ng-model  el   x000D              data-dynamic-directives    x000D                     if     selectIsRequired    ng-required       selectIsRequired       x000D                     tooltip-placement     bottom     x000D                     if     addTooltip      tooltip        dt         x000D                 gt  x000D               lt option value    gt  lt  option gt  x000D           lt  select gt  x000D   x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

A simple solution that could work in some cases is to create and  compile a wrapper and then append your original element to it   Something like     link  function scope  elem  attr       var wrapper   angular element   lt div tooltip gt  lt  div gt         elem before wrapper        compile wrapper  scope       wrapper append elem       This solution has the advantage that it keeps things simple by not recompiling the original element   This wouldn t work if any of the added directive s require any of the original element s directives or if the original element has absolute positioning

[javascript] Add directives from directive in AngularJS

Examples related to javascript

Examples related to angularjs

Examples related to model-view-controller

Examples related to mvvm

Examples related to angularjs-directive