Angular directive scope binding with = (equals)

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 Over 7 years ago