Angular directive scope binding with = (equals)

Posted . Visible to the public.

Angular directives with isolate scopes have three different variable binding strategies, of which one is =. Example:

# HTML
<panel value="parent.someFn() && false" twoway="parent.someProperty"></div>

# Coffeescript
@app.directive 'panel', ->
  scope:
    evaluated: '=value'
    bound: '=twoway'
  link: ->
    scope.evaluated # = false
    scope.bound = 'foo' # Updates parent.someProperty

HTML attributes bound with = (value, twoway) have their value evaluated as Angular expression in the parent scope's context and have the result assigned to the corresponding scope variable (evaluated, bound). It's a one-way binding ­– if the expression changes, the isolate scope's value will update.

Additionally, if the attribute value is a property of the parent scope (like "someProperty", instead of an expression like "1+2"), i.e. it is writable by any means, Angular will set up a two-way binding between that property and the isolate scope's property. Changes in either will reflect to the other.


Also see Angular isolate scopes: Calling a parent scope function with externally defined arguments.

Dominik Schöler
Last edit
Dominik Schöler
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2016-09-02 09:59)