How do I pass multiple attributes into an Angular js attribute directive

Question

I have an attribute directive restricted as follows    restrict   A    I need to pass in two attributes  a number and a function callback  accessing them within the directive using the attrs object   If the directive was an element directive  restricted with  E  I could to this    lt example-directive example-number  99  example-function  exampleCallback    gt    However  for reasons I won t go into I need the directive to be an attribute directive   How do I pass multiple attributes into an attribute directive

User · Answer

If you  require   exampleDirective  from another directive   your logic is in  exampleDirective s  controller  let s say  exampleCtrl       app directive  exampleDirective   function          return           restrict   A           scope  false          bindToController                myCallback    amp exampleFunction                     controller   exampleCtrl           controllerAs   vm             app controller  exampleCtrl   function          var vm   this      vm myCallback

User · Answer

You do it exactly the same way as you would with an element directive  You will have them in the attrs object  my sample has them two-way binding via the isolate scope but that s not required  If you re using an isolated scope you can access the attributes with scope  eval attrs sample  or simply scope sample  but they may not be defined at linking depending on your situation   app directive  sample   function          return           restrict   A           scope                 sample                      another                           link  function  scope  element  attrs                console log attrs               scope  watch  sample   function  newVal                    console log  sample   newVal                               scope  watch  another   function  newVal                    console log  another   newVal                                          used as    lt input type  text  ng-model  name  placeholder  Enter a name here  gt   lt input type  text  ng-model  something  placeholder  Enter something here  gt   lt div sample  name  another  something  gt  lt  div gt

User · Answer

You could pass an object as attribute and read it into the directive like this    lt div my-directive   id 123 name  teo  salary 1000 color red   gt  lt  div gt   app directive  myDirective   function          return                       link  function  scope  element  attrs                 convert the attributes to object and get its properties            var attributes   scope  eval attrs myDirective                     console log  id   attributes id              console log  id   attributes name

User · Answer

The directive can access any attribute that is defined on the same element  even if the directive itself is not the element   Template    lt div example-directive example-number  99  example-function  exampleCallback    gt  lt  div gt    Directive   app directive  exampleDirective    function          return           restrict   A         A  is the default  so you could remove this line         scope                callback     amp exampleFunction                      link  function  scope  element  attrs                var num   scope  eval attrs exampleNumber               console log  number   num               scope callback        calls exampleCallback                          fiddle  If the value of attribute example-number will be hard-coded  I suggest using  eval once  and storing the value   Variable num will have the correct type  a number

User · Answer

This worked for me and I think is more HTML5 compliant   You should change your html to use  data-  prefix   lt div data-example-directive data-number  99  gt  lt  div gt    And within the directive read the variable s value   scope            number

[javascript] How do I pass multiple attributes into an Angular.js attribute directive?

Examples related to javascript

Examples related to parameters

Examples related to angularjs

Examples related to attributes

Examples related to directive