What is the difference between and in directive scope in AngularJS

Question

I ve read the AngularJS documentation on the topic carefully  and then fiddled around with a directive  Here s the fiddle   And here are some relevant snippets    From the HTML    lt pane bi-title  title  title    title    gt   text   lt  pane gt   From the pane directive   scope    biTitle       title       bar            There are several things I don t get    Why do I have to use    title    with     and  title  with      Can I also access the parent scope directly  without decorating my element with an attribute  The documentation says  Often it s desirable to pass data from the isolated scope via expression and to the parent scope   but that seems to work fine with bidirectional binding too  Why would the expression route be better    I found another fiddle that shows the expression solution too  http   jsfiddle net maxisam QrCXh

User · Answer

Attribute string binding  one way    Two-way model binding  amp  Callback method binding

User · Answer

I created a little HTML file that contains Angular code demonstrating the differences between them    lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Angular lt  title gt       lt script src  https   ajax googleapis com ajax libs angularjs 1 3 15 angular min js  gt  lt  script gt     lt  head gt     lt body ng-app  myApp  gt       lt div ng-controller  myCtrl as VM  gt         lt a my-dir         attr1  VM sayHi  Juan     lt  -- scope      -- gt          attr2  VM sayHi  Juan     lt  -- scope      -- gt          attr3  VM sayHi  Juan     lt  -- scope    amp   -- gt         gt  lt  a gt       lt  div gt       lt script gt      angular module  myApp            controller  myCtrl    function          var vm   this        vm sayHi   function name           return   Hey there      name                        directive  myDir    function          return           scope              attr1                 attr2                 attr3    amp                      link  function scope             console log scope attr1           logs  Hey there  Juan            console log scope attr2           logs  VM sayHi  Juan              console log scope attr3         amp   logs  function  a  return h c a              console log scope attr3         amp   logs  Hey there  Juan                                  lt  script gt     lt  body gt   lt  html gt

User · Answer

This question has been already beaten to death  but I ll share this anyway in case someone else out there is struggling with the horrible mess that is AngularJS scopes  This will cover     lt       amp  and     The full write up can be found here         establishes a two way binding  Changing the property in the parent will result in change in the child  and vice versa      lt  establishes a one way binding  parent to child  Changing the property in the parent will result in change in the child  but changing the child property will not affect the parent property       will assign to the child property the string value of the tag attribute  If the attribute contains an expression  the child property updates whenever the expression evaluates to a different string  For example    lt child-component description  The movie title is    ctrl movie title      gt    bindings        description            Here  the description property in the child scope will be the current value of the expression  The movie title is    ctrl movie title     where movie is an object in the parent scope       amp  is a bit tricky  and in fact there seems to be no compelling reason to ever use it  It allows you to evaluate an expression in the parent scope  substituting parameters with variables from the child scope  An example  plunk     lt child-component    foo    myVar    ctrl parentVar   myOtherVar   lt  child-component gt    angular module  heroApp   component  childComponent       template    lt div gt      ctrl parentFoo  myVar 5  myOtherVar  xyz        lt  div gt      bindings        parentFoo    amp foo            Given parentVar 10  the expression parentFoo  myVar 5  myOtherVar  xyz    will evaluate to 5   10    xyz  and the component will render as    lt div gt 15xyz lt  div gt    When would you ever want to use this convoluted functionality   amp  is often used by people to pass to the child scope a callback function in the parent scope  In reality  however  the same effect can be achieved by using   lt   to pass the function  which is more straightforward and avoids the awkward curly braces syntax to pass parameters   myVar 5  myOtherVar  xyz     Consider   Callback using  amp     lt child-component parent-foo   ctrl foo bar    gt    angular module  heroApp   component  childComponent       template    lt button ng-click   ctrl parentFoo  bar  xyz     gt Call foo in parent lt  button gt      bindings        parentFoo    amp             Callback using  lt       lt child-component parent-foo   ctrl foo   gt    angular module  heroApp   component  childComponent       template    lt button ng-click   ctrl parentFoo  xyz    gt Call foo in parent lt  button gt      bindings        parentFoo    lt               Note that objects  and arrays  are passed by reference to the child scope  not copied  What this means is that even if it s a one-way binding  you are working with the same object in both the parent and the child scope      To see the different prefixes in action  open this plunk   One-time binding initialization  using      Official docs  Later versions of AngularJS introduce the option to have a one-time binding  where the child scope property is updated only once  This improves performance by eliminating the need to watch the parent property  The syntax is different from above  to declare a one-time binding  you add    in front of the expression in the component tag    lt child-component    tagline       ctrl tagline  gt   lt  child-component gt    This will propagate the value of tagline to the child scope without establishing a one-way or two-way binding  Note  if tagline is initially undefined in the parent scope  angular will watch it until it changes and then make a one-time update of the corresponding property in the child scope    Summary  The table below shows how the prefixes work depending on whether the property is an object  array  string  etc

User · Answer

The   means bi-directional binding  so a reference to a variable to the parent scope  This means  when you change the variable in the directive  it will be changed in the parent scope as well     means the variable will be copied  cloned  into the directive   As far as I know   lt pane bi-title    title    title    title    gt   text   lt  pane gt  should work too  bi-title will receive the parent scope variable value  which can be changed in the directive   If you need to change several variables in the parent scope  you could execute a function on the parent scope from within the directive  or pass data via a service

User · Answer

There are a lot of great answers here  but I would like to offer my perspective on the differences between       and  amp  binding that proved useful for me   All three bindings are ways of passing data from your parent scope to your directive s isolated scope through the element s attributes           binding is for passing strings        These strings support      expressions for interpolated values        For example          The interpolated expression is evaluated against       directive s parent scope      binding is for two-way model binding  The model in parent scope      is linked to the model in the directive s isolated scope  Changes to      one model affects the other  and vice versa     amp  binding is for passing a method into your directive s scope so that      it can be called within your directive   The method is pre-bound to      the directive s parent scope  and supports arguments   For example if the method is hello name  in parent scope  then in      order to execute the method from inside your directive  you must       call  scope hello  name  world         I find that it s easier to remember these differences by referring to the scope bindings by a shorter description      Attribute string binding   Two-way model binding  amp  Callback method binding   The symbols also make it clearer as to what the scope variable represents inside of your directive s implementation      string   model  amp  method   In order of usefulness  for me anyways          amp

User · Answer

and   see other answers     One gotcha about  amp  TL DR   amp  gets expression  not only function like in examples in other answers  from a parent  and sets it as a function in the directive  that calls the expression  And this function has the ability to replace any variable  even function name  of expression  by passing an object with the variables     explained  amp  is an expression reference  that means if you pass something like   lt myDirective expr  x  y  gt  lt  myDirective gt  in the directive this expr will be a function  that calls the expression  like  function expr   return x    y   so in directive s html  lt button ng-click  expr    gt  lt  button gt  will call the expression  In js of the directive just  scope expr   will call the expression too  The expression will be called with  scope x and  scope y of the parent  You have the ability to override the parameters  If you set them by call  e g   lt button ng-click  expr  x 5    gt  lt  button gt  then the expression will be called with your parameter x and parent s parameter y  You can override both  Now you know  why  lt button ng-click  functionFromParent  x 5    gt  lt  button gt  works  Because it just calls the expression of parent  e g   lt myDirective functionFromParent  function1 x   gt  lt  myDirective gt   and replaces possible values with your specified parameters  in this case x  it could be   lt myDirective functionFromParent  function1 x    5  gt  lt  myDirective gt  or  lt myDirective functionFromParent  function1 x    z  gt  lt  myDirective gt  with child call   lt button ng-click  functionFromParent  x 5  z  4    gt  lt  button gt   or even with function replacement   lt button ng-click  functionFromParent  function1  myfn  x 5  z  4    gt  lt  button gt    it just an expression  does not matter if it is a function  or many functions  or just comparison  And you can replace any variable of this expression   Examples  directive template vs called code  parent has defined  scope x   scope y  parent template   lt myDirective expr  x  y  gt  lt  myDirective gt   lt button ng-click  expr    gt  lt  button gt  calls  scope x   scope y  lt button ng-click  expr  x  5    gt  lt  button gt  calls 5     scope y  lt button ng-click  expr  x 5  y 6    gt  lt  button gt  calls 5    6    parent has defined  scope function1   scope x   scope y  parent template   lt myDirective expr  function1 x    y  gt  lt  myDirective gt      lt button ng-click  expr    gt  lt  button gt  calls  scope function1  scope x     scope y  lt button ng-click  expr  x  5    gt  lt  button gt  calls  scope function1 5     scope y  lt button ng-click  expr  x 5  y 6    gt  lt  button gt  calls  scope function1 5    6 directive has  scope myFn as function   lt button ng-click  expr  function1  myFn  x 5  y 6    gt  lt  button gt  calls  scope myFn 5     6

User · Answer

The   way is 2-way binding  which lets you to have live changes inside your directive  When someone changes that variable out of directive  you will have that changed data inside your directive  but   way is not two-ways binding  It works like Text  You bind once  and you will have only its value   To get it more clearly  you can use this great article   AngularJS Directive Scope     and

User · Answer

binds a local directive scope property to the evaluated value of the DOM attribute    binds a local directive scope property to a parent scope property    amp  binding is for passing a method into your directive s scope so that it can be called within your directive     Attribute string binding   Two-way model binding  amp  Callback method binding

User · Answer

get as string   This does not create any bindings whatsoever  You re simply getting the word you passed in as a string     2 way binding   changes made from the controller will be reflected in the reference held by the directive  and vice-versa    amp  This behaves a bit differently  because the scope gets a function that returns the object that was passed in  I m assuming this was necessary to make it work  The fiddle should make this clear    After calling this getter function  the resulting object behaves as follows    if a function was passed  then the function is executed in the parent  controller  closure when called if a non-function was passed in  simply get a local copy of the object that has no bindings     This fiddle should demonstrate how they work  Pay special attention to the scope functions with get    in the name to hopefully better understand what I mean about  amp

User · Answer

Simply we can use -        - for String values for one way Data binding  in one way data binding you can only pass scope value to directive    - for object value for two way data binding  in two way data binding you can change the scope value in directive as well as in html also     amp   - for methods and functions    EDIT  In our Component definition for Angular version 1 5 And above there are four different type of bindings      Two-way data binding  - if we change the value it automatically update  lt  one way binding  - when we just want to read a parameter from a parent scope and not update it    this is for String Parameters  amp  this is for Callbacks in case your component needs to output something to its parent scope

User · Answer

I implemented all the possible options in a fiddle   It deals with all the options   scope       name   amp       scope       name         scope       name         scope        scope true    https   jsfiddle net rishulmatta v7xf2ujm

User · Answer

If you would like to see more how this work with a live example  http   jsfiddle net juanmendez k6chmnch   var app   angular module  app        app controller  myController   function   scope         scope title    binding       app directive  jmFind   function          return           replace  true          restrict   C           transclude  true          scope                title1                   title2                         template    lt div gt  lt p gt   title1     title2   lt  p gt  lt  div gt

User · Answer

Even when the scope is local  as in your example  you may access the parent scope through the property  parent  Assume in the code below  that title is defined on the parent scope  You may then access title as  parent title   link   function scope    console log scope  parent title     template    the parent has the title    parent title      However in most cases the same effect is better obtained using attributes   An example of where I found the   amp   notation  which is used  to pass data from the isolated scope via an expression and to the parent scope   useful  and a two-way databinding could not be used  was in a directive for rendering a special datastructure inside an ng-repeat    lt render data    record  deleteFunction    dataList splice  index 1   ng-repeat    record in dataList   gt   lt  render gt    One part of the rendering was a delete button and here it was useful to attach a deletefunction from the outside scope via  amp   Inside the render-directive it looks like  scope     data        deleteFunction     amp     template         lt button ng-click    deleteFunction    gt  lt  button gt     2-way databinding i e  data       can not be used as the delete function would run on every  digest cycle  which is not good  as the record is then immediately deleted and never rendered

User · Answer

Why do I have to use    title    with     and  title  with        When you use   title     only the parent scope value will be passed to directive view and evaluated  This is limited to one way  meaning that change will not be reflected in parent scope  You can use     when you want to reflect the changes done in child directive to parent scope also  This is two way      Can I also access the parent scope directly  without decorating my   element with an attribute    When directive has scope attribute in it   scope         then you no longer will be able to access parent scope directly  But still it is possible to access it via scope  parent etc  If you remove scope from directive  it can be accessed directly      The documentation says  Often it s desirable to pass data from the   isolated scope via an expression and to the parent scope   but that   seems to work fine with bidirectional binding too  Why would the   expression route be better    It depends based on context  If you want to call an expression or function with data  you use  amp  and if you want share data   you can use biderectional way using      You can find the differences between multiple ways of passing data to directive at below link   AngularJS     Isolated Scopes       vs   vs  amp   http   www codeforeach com angularjs angularjs-isolated-scopes-vs-vs

User · Answer

There are three ways scope can be added in the directive    Parent scope  This is the default scope inheritance     The directive and its parent controller directive inside which it lies  scope is same  So any changes made to the scope variables inside directive are reflected in the parent controller as well  You don t need to specify this as it is the default    Child scope  directive creates a child scope which inherits from the parent scope if you specify the scope variable of the directive as true     Here  if you change the scope variables inside directive  it won t reflect in the parent scope  but if you change the property of a scope variable  that is reflected in the parent scope  as you actually modified the scope variable of the parent   Example   app directive  myDirective   function         return           restrict   EA           scope  true          link  function element  scope  attrs               scope somvar    new value     doesnot reflect in the parent scope             scope someObj someProp    new value     reflects as someObj is of parent  we modified that but did not override                          Isolated scope  This is used when you want to create the scope that does not inherit from the controller scope     This happens when you are creating plugins as this makes the directive generic since it can be placed in any HTML and does not gets affected by its parent scope   Now  if you don t want any interaction with the parent scope  then you can just specify scope as an empty object  like   scope       this does not interact with the parent scope in any way   Mostly this is not the case as we need some interaction with the parent scope  so we want some of the values  changes to pass through  For this reason  we use   1           Text binding   one-way binding   2          Direct model binding   two-way binding   3    amp       Behaviour binding   Method binding        means that the changes from the controller scope will be reflected in the directive scope but if you modify the value in the directive scope  the controller scope variable will not get affected      always expects the mapped attribute to be an expression  This is very important  because to make the         prefix work  we need to wrap the attribute value inside           is bidirectional so if you change the variable in directive scope  the controller scope variable gets affected as well   amp  is used to bind controller scope method so that if needed we can call it from the directive  The advantage here is that the name of the variable need not be same in controller scope and directive scope    Example  the directive scope has a variable  dirVar  which syncs with variable  contVar  of the controller scope  This gives a lot of power and generalization to the directive as one controller can sync with variable v1 while another controller using the same directive can ask dirVar to sync with variable v2   Below is the example of usage   The directive and controller are    var app   angular module  app         app controller  MainCtrl   function   scope         scope name    Harry        scope color     333333        scope reverseName   function          scope name    scope name split     reverse   join                  scope randomColor   function             scope color       Math floor Math random   16777215  toString 16              app directive  myDirective   function        return           restrict   EA           scope                name                   color                   reverse    amp                      link  function element  scope  attrs                do something like             scope reverse                 calling the controllers function                        And the html note the differnce for   and       lt div my-directive   class  directive    name    name      reverse  reverseName      color  color   gt   lt  div gt    Here is a link to the blog which describes it nicely

User · Answer

the main difference between them is just        Attribute string binding   Two-way model binding  amp  Callback method binding

User · Answer

local scope property is used to access string values that are defined outside the directive     In cases where you need to create a two-way binding between the outer scope and the directive   s isolate scope you can use the   character    amp  local scope property allows the consumer of a directive to pass in a function that the directive can invoke    Kindly check the below link which gives you clear understanding with examples I found it really very useful so thought of sharing it   http   weblogs asp net dwahlin creating-custom-angularjs-directives-part-2-isolate-scope

User · Answer

Why do I have to use    title    with     and  title  with          binds a local directive scope property to the evaluated value of the DOM attribute   If you use title title1 or title  title1   the value of DOM attribute  title  is simply the string title1   If you use title    title     the value of the DOM attribute  title  is the interpolated value of   title    hence the string will be whatever parent scope property  title  is currently set to   Since attribute values are always strings  you will always end up with a string value for this property in the directive s scope when using       binds a local directive scope property to a parent scope property   So with    you use the parent model scope property name as the value of the DOM attribute   You can t use     s with     With    you can do things like title    title   and then some  --   title   is interpolated  then the string  and them some  is concatenated with it   The final concatenated string is what the local directive scope property gets    You can t do this with    only      With    you will need to use attr  observe  title   function value           if you need to use the value in your link ing  function   E g   if scope title           won t work like you expect   Note that this means you can only access this attribute asynchronously  You don t need to use  observe   if you are only using the value in a template   E g   template    lt div gt   title   lt  div gt     With    you don t need to use  observe      Can I also access the parent scope directly  without decorating my element with an attribute    Yes  but only if you don t use an isolate scope   Remove this line from your directive   scope            and then your directive will not create a new scope   It will use the parent scope   You can then access all of the parent scope properties directly      The documentation says  Often it s desirable to pass data from the isolated scope via an expression and to the parent scope   but that seems to work fine with bidirectional binding too  Why would the expression route be better    Yes  bidirectional binding allows the local directive scope and the parent scope to share data    Expression binding  allows the directive to call an expression  or function  defined by a DOM attribute -- and you can also pass data as arguments to the expression or function   So  if you don t need to share data with the parent -- you just want to call a function defined in the parent scope -- you can use the  amp  syntax   See also   Lukas s isolated scope blog post  covers        amp   dnc253 s explanation of   and   my blog-like answer about scopes -- the directives section  way at the bottom  just before the Summary section  has a picture of an isolate scope and its parent scope -- the directive scope uses   for one property and   for another What is the difference between  amp  vs   and   in angularJS

[angularjs] What is the difference between '@' and '=' in directive scope in AngularJS?

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-scope

Examples related to isolated-scope