Angularjs - Pass argument to directive

Question

Im wondering if there is a way to pass an argument to a directive   What I want to do is append a directive from the controller like this    scope title    title    scope title2    title2    angular element document getElementById  wrapper    append   lt directive name gt  lt  directive name gt       Is it possible to pass an argument at the same time so the content of my directive template could be linked to one scope or another   here is the directive   app directive  directive name   function        return           restrict  E           transclude true          template   lt div class  title  gt  lt h2 gt   title   lt  h3 gt  lt  div gt            replace true             What if I want to use the same directive but with  scope title2

User · Accepted Answer

Here is how I solved my problem   Directive  app directive  directive name   function        return           restrict   E           transclude  true          template  function elem  attr              return   lt div gt  lt h2 gt     attr scope     lt  h2 gt  lt  div gt                       replace  true             Controller   scope building   function data       var chart   angular element document createElement  directive name         chart attr  scope   data        compile chart   scope       angular element document getElementById  wrapper    append chart         I now can use different scopes through the same directive and append them dynamically

User · Answer

You can pass arguments to your custom directive as you do with the builtin Angular-directives - by specifying an attribute on the directive-element   angular element document getElementById  wrapper            append   lt directive-name title  title2  gt  lt  directive-name gt       What you need to do is define the scope  including the argument s  parameter s   in the factory function of your directive  In below example the directive takes a title-parameter  You can then use it  for example in the template  using the regular Angular-way    title    app directive  directiveName   function       return         restrict  E         scope             title                     template   lt div class  title  gt  lt h2 gt   title   lt  h2 gt  lt  div gt               Depending on how what you want to bind  you have different options      is two-way binding   simply reads the value  one-way binding   amp  is used to bind functions   In some cases you may want use an  external  name which differs from the  internal  name  With external I mean the attribute name on the directive-element and with internal I mean the name of the variable which is used within the directive s scope    For example if we look at above directive  you might not want to specify another  additional attribute for the title  even though you internally want to work with a title-property  Instead you want to use your directive as follows    lt directive-name  title2  gt  lt  directive-name gt    This can be achieved by specifying a name behind the above mentioned option in the scope definition   scope        title    directiveName      Please also note following things    The HTML5-specification says that custom attributes  this is basically what is all over the place in Angular applications  should be prefixed with data-  Angular supports this by stripping the data--prefix from any attributes  So in above example you could specify the attribute on the element  data-title  title2   and internally everything would be the same  Attributes on elements are always in the form of  lt div data-my-attribute         gt  while in code  e g  properties on scope object  they are in the form of myAttribute  I lost lots of time before I realized this  For another approach to exchanging sharing data between different Angular components  controllers  directives   you might want to have a look at services or directive controllers  You can find more information on the Angular homepage  directives

User · Answer

Controller code  myApp controller  mainController      scope     log   function  scope   log         scope person             name  sangeetha PH          address  first Block               Directive Code    myApp directive  searchResult  function       return         restrict  AECM          templateUrl  directives search html          replace  true         scope              personName                 personAddress                          USAGE   File  directives search html  content    lt h1 gt   personName    lt  h1 gt   lt h2 gt   personAddress   lt  h2 gt    the File where we use directive    lt search-result person-name    person name    person-address    person address    gt  lt  search-result gt

User · Answer

lt button my-directive  push  gt Push to Go lt  button gt   app directive  myDirective   function         return           restrict    A            link  function scope  elm  attrs                    elm bind  click   function event                         alert  You pressed button      event target getAttribute  my-directive                                                here is what I did  I m using directive as html attribute and I passed parameter as following in my HTML file  my-directive  push  And from the directive I retrieved it from the Mouse-click event object  event target getAttribute  my-directive

User · Answer

You can try like below   app directive  directive name   function    return       restrict  E       transclude true      template   lt div class  title  gt  lt h2 gt   title   lt  h3 gt  lt  div gt        scope         accept                replace true           it sets up a two-way binding between the value of the  accept  attribute and the parent scope   And also you can set two way data binding with property       For example  if you want both key and value bound to the local scope you would do     scope       key          value            For more info  https   docs angularjs org guide directive  So  if you want to pass an argument from controller to directive  then refer this below fiddle  http   jsfiddle net jaimem y85Ft 7   Hope it helps

User · Answer

Insert the var msg in the click event with scope  apply to make the changes to the confirm  based on your controller changes to the variables shown in ng-confirm-click therein    lt button type  quot button quot  class  quot btn quot  ng-confirm-click  quot You are about to send   quantity   of   thing   selected  Confirm with OK quot  confirmed-click  quot youraction id  quot  aria-describedby  quot passwordHelpBlock quot  gt Send lt  button gt      app directive  ngConfirmClick       function         return         link  function scope  element  attr            var clickAction   attr confirmedClick          element on  click   function event              var msg   attr ngConfirmClick     quot Are you sure  Click OK to confirm  quot             if  window confirm msg                 scope  apply clickAction

[angularjs] Angularjs - Pass argument to directive

Examples related to angularjs

Examples related to controller

Examples related to arguments

Examples related to directive