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 · 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('<div tooltip></div>');
    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.

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

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

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

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

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

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

[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