Link vs compile vs controller

Question

When you create a directive  you can put code into the compiler  the link function or the controller    In the docs  they explain that    compile and link function are used in different phases of the angular cycle controllers are shared between directives   However  for me it is not clear  which kind of code should go where   E g   Can I create functions in compile and have them attached to the scope in link or only attach functions to the scope in the controller   How are controllers shared between directives  if each directive can have its own controller  Are the controllers really shared or is it just the scope properties

User · Answer

Also  a good reason to use a controller vs  link function  since they both have access to the scope  element  and attrs  is because you can pass in any available service or dependency into a controller  and in any order   whereas you cannot do that with the link function  Notice the different signatures   controller  function  scope   exceptionHandler   attr   element   parse   myOtherService  someCrazyDependency         vs   link  function scope  element  attrs         no services allowed

User · Answer

compile  used when we need to modify directive template  like add new expression  append another directive inside this directive  controller  used when we need to share reuse  scope data link  it is a function which used when we need to attach event handler or to manipulate DOM

User · Answer

A directive allows you to extend the HTML vocabulary in a declarative fashion for building web components  The ng-app attribute is a directive  so is ng-controller and all of the ng- prefixed attributes  Directives can be attributes  tags or even class names  comments   How directives are born  compilation and instantiation   Compile  We   ll use the compile function to both manipulate the DOM before it   s rendered and return a link function  that will handle the linking for us   This also is the place to put any methods that need to be shared around with all of the instances of this directive   link  We   ll use the link function to register all listeners on a specific DOM element  that   s cloned from the template  and set up our bindings to the page   If set in the compile   function they would only have been set once  which is often what you want   If set in the link   function they would be set every time the HTML element is bound to data in the   object    lt div ng-repeat  i in  0 1 2   gt       lt simple gt           lt div gt Inner content lt  div gt       lt  simple gt   lt  div gt   app directive  simple   function       return        restrict   EA        transclude true       template   lt div gt   label   lt div ng-transclude gt  lt  div gt  lt  div gt                 compile  function element  attributes          return                pre  function scope  element  attributes  controller  transcludeFn                                 post  function scope  element  attributes  controller  transcludeFn                                           controller  function  scope                       Compile function returns the pre and post link function  In the pre link function we have the instance template and also the scope from the controller  but yet the template is not bound to scope and still don t have transcluded content    Post link function is where post link is the last function to execute  Now the transclusion is complete  the template is linked to a scope  and the view will update with data bound values after the next digest cycle  The link option is just a shortcut to setting up a post-link function   controller  The directive controller can be passed to another directive linking compiling phase  It can be injected into other directices as a mean to use in inter-directive communication    You have to specify the name of the directive to be required     It should be bound to same element or its parent  The name can be prefixed with         Will not raise any error if a mentioned directive does not exist        Will look for the directive on parent elements  if not available on the same element    Use square bracket     directive1      directive2      directive3   to require multiple directives controller    var app   angular module  app         app controller  MainCtrl   function  scope   element         app directive  parentDirective   function       return       restrict   E       template    lt child-directive gt  lt  child-directive gt        controller  function  scope   element         this variable    Hi Vinothbabu                 app directive  childDirective   function       return       restrict    E       template    lt h1 gt I am child lt  h1 gt        replace  true      require    parentDirective       link  function  scope   element  attr  parentDirectCtrl           you now have access to parentDirectCtrl variable

User · Answer

this is a good sample for understand directive phases http   codepen io anon pen oXMdBQ editors 101  var app   angular module  myapp        app directive  slngStylePrelink   function         return           scope                drctvName                         controller  function  scope                console log  controller for     scope drctvName                      compile  function element  attr                console log  compile for    attr name              return                   post  function  scope  element  attr                        console log  post link for    attr name                                     pre  function  scope  element  attr                         scope element   element                      console log  pre link for    attr name                             from angular js 1 4 1                     function ngStyleWatchAction newStyles  oldStyles                            if  oldStyles  amp  amp   newStyles     oldStyles                                 forEach oldStyles  function val  style                                    element css style                                                                                         if  newStyles  element css newStyles                                               scope  watch attr slngStylePrelink  ngStyleWatchAction  true                           Run immediately  because the watcher s first run is async                     ngStyleWatchAction  scope  eval attr slngStylePrelink                                                            html   lt body ng-app  myapp  gt       lt div slng-style-prelink   height  500px    drctv-name  parent  style  border 1px solid  name  parent  gt           lt div slng-style-prelink   height  50     drctv-name  child  style  border 1px solid red  name  child  gt           lt  div gt       lt  div gt   lt  body gt

User · Answer

Compile     This is the phase where Angular actually compiles your directive  This compile function is called just once for each references to the given directive  For example  say you are using the ng-repeat directive  ng-repeat will have to look up the element it is attached to  extract the html fragment that it is attached to and create a template function    If you have used HandleBars  underscore templates or equivalent  its like compiling their templates to extract out a template function  To this template function you pass data and the return value of that function is the html with the data in the right places    The compilation phase is that step in Angular which returns the template function  This template function in angular is called the linking function    Linking phase     The linking phase is where you attach the data    scope   to the linking function and it should return you the linked html  Since the directive also specifies where this html goes or what it changes  it is already good to go  This is the function where you want to make changes to the linked html  i e the html that already has the data attached to it  In angular if you write code in the linking function its generally the post-link function  by default   It is kind of a callback that gets called after the linking function has linked the data with the template     Controller    The controller is a place where you put in some directive specific logic  This logic can go into the linking function as well  but then you would have to put that logic on the scope to make it  shareable   The problem with that is that you would then be corrupting the scope with your directives stuff which is not really something that is expected  So what is the alternative if two Directives want to talk to each other   co-operate with each other  Ofcourse you could put all that logic into a service and then make both these directives depend on that service but that just brings in one more dependency  The alternative is to provide a Controller for this scope   usually isolate scope     and then this controller is injected into another directive when that directive  requires  the other one  See tabs and panes on the first page of angularjs org for an example

User · Answer

I wanted to add also what the O Reily AngularJS book by the Google Team has to say   Controller - Create a controller which publishes an API for communicating across directives  A good example is Directive to Directive Communication Link - Programmatically modify resulting DOM element instances  add event listeners  and set up data binding  Compile - Programmatically modify the DOM template for features across copies of a directive  as when used in ng-repeat  Your compile function can also return link functions to modify the resulting element instances

[angularjs] Link vs compile vs controller

Examples related to angularjs

Examples related to angularjs-directive