Use of symbols and in custom directive s scope binding AngularJS

Question

I have read a lot about the use of these symbols in the implementation of custom directives in AngularJS but the concept is still not clear to me  What does it mean if I use one of the scope values in the custom directive   x000D   x000D  var mainApp   angular module  mainApp        mainApp directive  modalView  function      return       restrict  E        scope     OR scope   amp   OR scope     OR scope   gt   OR scope true         x000D   x000D   x000D   What exactly are we doing with the scope here  I am also not sure whether  quot scope   gt   quot  exists in the official documentation or not  It s been used in my project   The use of  quot scope   gt   quot  was an issue in my project and It has been fixed

User · Answer

I had trouble binding a value with any of the symbols in AngularJS 1.6. I did not get any value at all, only undefined, even though I did it the exact same way as other bindings in the same file that did work.

Problem was: my variable name had an underscore.

This fails:

bindings: { import_nr: '='}

This works:

bindings: { importnr: '='}

(Not completely related to the original question, but that was one of the top search results when I looked, so hopefully this helps someone with the same problem.)

User · Answer

lt  one-way binding    two-way binding   amp  function binding    pass only strings

User · Answer

In an AngularJS directive the scope allows you to access the data in the attributes of the element to which the directive is applied   This is illustrated best with an example    lt div my-customer name  Customer XYZ  gt  lt  div gt    and the directive definition   angular module  myModule        directive  myCustomer   function       return       restrict   E       scope          customerName    name             controllerAs   vm       bindToController  true      controller     http   function  http          var vm   this         vm doStuff   function pane            console log vm customerName                        link  function scope  element  attrs          console log scope customerName                    When the scope property is used the directive is in the so called  isolated scope  mode  meaning it can not directly access the scope of the parent controller    In very simple terms  the meaning of the binding symbols is   someObject        two-way data binding   someString       passed directly or through interpolation with double curly braces notation        someExpression    amp    e g  hideDialog     This information is present in the AngularJS directive documentation page  although somewhat spread throughout the page   The symbol  gt  is not part of the syntax   However   lt  does exist as part of the AngularJS component bindings and means one way binding

User · Answer

The AngularJS documentation on directives is pretty well written for what the symbols mean   To be clear  you cannot just have   scope        in a directive definition  You must have properties for which those bindings apply  as in   scope        myProperty          I strongly suggest you read the documentation and the tutorials on the site  There is much more information you need to know about isolated scopes and other topics   Here is a direct quote from the above-linked page  regarding the values of scope      The scope property can be true  an object or a falsy value          falsy  No scope will be created for the directive  The directive will use its parent s scope    true  A new child scope that prototypically inherits from its parent will be created for the directive s element  If multiple directives on the same element request a new scope  only one new scope is created  The new scope rule does not apply for the root of the template since the root of the template always gets a new scope           an object hash   A new  isolate  scope is created for the directive s element  The  isolate  scope differs from normal scope in that it does not prototypically inherit from its parent scope  This is useful when creating reusable components  which should not accidentally read or modify data in the parent scope       Retrieved 2017-02-13 from https   code angularjs org 1 4 11 docs api ng service  compile -scope-  licensed as CC-by-SA 3 0

User · Answer

When we create a customer directive  the scope of the directive could be in Isolated scope  It means the directive does not share a scope with the controller  both directive and controller have their own scope  However  data can be passed to the directive scope in three possible ways    Data can be passed as a string using the   string literal  pass string value  one way binding  Data can be passed as an object using the   string literal  pass object  2 ways binding  Data can be passed as a function the  amp  string literal  calls external function  can pass data from directive to controller

User · Answer

gt  is not in the documentation    lt  is for one-way binding     binding is for passing strings  These strings support      expressions for interpolated values     binding is for two-way model binding  The model in parent scope is linked to the model in the directive s isolated scope    amp  binding is for passing a method into your directive s scope so that it can be called within your directive    When we are setting scope  true in directive  Angular js will create a new scope for that directive  That means any changes made to the directive scope will not reflect back in parent controller

[angularjs] Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-scope