Read more

Angular directive scope binding with = (equals)

Dominik Schöler
September 02, 2016Software engineer at makandra GmbH

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
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

Posted by Dominik Schöler to makandra dev (2016-09-02 11:59)