Customizing the template within a Directive

Question

I have a form that is using markup from Bootstrap  like the following    lt form class  form-horizontal  gt     lt fieldset gt       lt legend gt Legend text lt  legend gt       lt div class  control-group  gt         lt label class  control-label  for  nameInput  gt Name lt  label gt         lt div class  controls  gt           lt input type  text  class  input-xlarge  id  nameInput  gt           lt p class  help-block  gt Supporting help text lt  p gt         lt  div gt       lt  div gt     lt  fieldset gt   lt  form gt    There s a lot of boilerplate code in there  that I d like to reduce to a new directive - form-input  like follows    lt form-input label  Name  form-id  nameInput  gt  lt  form-input gt    generates       lt div class  control-group  gt         lt label class  control-label  for  nameInput  gt Name lt  label gt         lt div class  controls  gt           lt input type  text  class  input-xlarge  id  nameInput  gt         lt  div gt       lt  div gt    I have this much working via a simple template   angular module  formComponents            directive  formInput   function             return               restrict   E               scope                    label   bind                   formId   bind                             template      lt div class  control-group  gt                                   lt label class  control-label  for    formId    gt   label   lt  label gt                                   lt div class  controls  gt                                       lt input type  text  class  input-xlarge  id    formId    name    formId    gt                                   lt  div gt                               lt  div gt                       However it s when I come to add in more advanced functionality that I m getting stuck   How can I support default values in the template   I d like to expose the  type  parameter as an optional attribute on my directive  eg    lt form-input label  Password  form-id  password  type  password   gt  lt  form-input gt   lt form-input label  Email address  form-id  emailAddress  type  email    gt  lt  form-input gt    However  if nothing is specified  I d like to default to  text    How can I support this   How can I customize the template based on the presence   absence of attributes   I d also like to be able to support the  required  attribute  if it s present  Eg    lt form-input label  Email address  form-id  emailAddress  type  email  required  gt  lt  form-input gt    If required is present in the directive  I d like to add it to the generated  lt input   gt  in the output  and ignore it otherwise   I m not sure how to achieve this   I suspect these requirements may have moved beyond a simple template  and have to start using the pre-compile phases  but I m at a loss where to start

User · Answer

Here s what I ended up using   I m very new to AngularJS  so would love to see better   alternative solutions   angular module  formComponents            directive  formInput   function             return               restrict   E               scope                  link  function scope  element  attrs                                var type   attrs type     text                   var required   attrs hasOwnProperty  required      required  required                         var htmlText     lt div class  control-group  gt                           lt label class  control-label  for      attrs formId      gt     attrs label     lt  label gt                               lt div class  controls  gt                               lt input type      type      class  input-xlarge  id      attrs formId      name      attrs formId          required     gt                               lt  div gt                           lt  div gt                    element html htmlText                                    Example usage    lt form-input label  Application Name  form-id  appName  required  gt  lt  form-input gt   lt form-input type  email  label  Email address  form-id  emailAddress  required  gt  lt  form-input gt   lt form-input type  password  label  Password  form-id  password    gt  lt  form-input gt

User · Answer

angular module  formComponents          directive  formInput   function         return           restrict   E           compile  function element  attrs                var type   attrs type     text               var required   attrs hasOwnProperty  required      required  required                     var htmlText     lt div class  control-group  gt                       lt label class  control-label  for      attrs formId      gt     attrs label     lt  label gt                           lt div class  controls  gt                           lt input type      type      class  input-xlarge  id      attrs formId      name      attrs formId          required     gt                           lt  div gt                       lt  div gt                element replaceWith htmlText

User · Answer

The above answers unfortunately don t quite work  In particular  the compile stage does not have access to scope  so you can t customize the field based on dynamic attributes  Using the linking stage seems to offer the most flexibility  in terms of asynchronously creating dom  etc   The below approach addresses that    lt  -- Usage  -- gt   lt form gt     lt form-field ng-model  formModel field attr   field  field  ng-repeat  field in fields  gt   lt  form gt         directive angular module  app    directive  formField   function  compile   parse      return        restrict   E        compile  function element  attrs          var fieldGetter    parse attrs field          return function  scope  element  attrs            var template  field  id          field   fieldGetter scope           template      your dom structure here             element replaceWith  compile template  scope                           I ve created a gist with more complete code and a writeup of the approach

User · Answer

Tried to use the solution proposed by Misko  but in my situation  some attributes  which needed to be merged into my template html  were themselves directives   Unfortunately  not all of the directives referenced by the resulting template did work correctly  I did not have enough time to dive into angular code and find out the root cause  but found a workaround  which could potentially be helpful    The solution was to move the code  which creates the template html  from compile to a template function  Example based on code from above       angular module  formComponents          directive  formInput   function         return           restrict   E           template  function element  attrs               var type   attrs type     text               var required   attrs hasOwnProperty  required      required  required                     var htmlText     lt div class  control-group  gt                       lt label class  control-label  for      attrs formId      gt     attrs label     lt  label gt                           lt div class  controls  gt                           lt input type      type      class  input-xlarge  id      attrs formId      name      attrs formId          required     gt                           lt  div gt                       lt  div gt                 return htmlText                    compile  function element  attrs                         do whatever else is necessary

[javascript] Customizing the template within a Directive

Examples related to javascript

Examples related to angularjs