Read more

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

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

Isolate scopes offer three kinds of variable binding. One of them is &, allowing to bind a property of the isolate scope to a function in the parent scope. Example:

# HTML
<panel proxy="parent.someFunction(arg1, arg2)"></div>

# Coffeescript
@app.directive 'panel', ->
  scope:
    parentFn: '&proxy'
  link: (scope) ->
    scope.parentFn(arg1: 'first', arg2: 'second')
Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

In this dumb example, the panel directive will call its scope's parentFn() function with two arguments, which proxies to parent.someFunction('first', 'second'). But what if the directive cannot know the arguments to pass to that function?

Defining plain function arguments in the HTML

Luckily Angular supports plain values in the proxy definition in the HTML, and even a combination with variables:

# HTML
<panel proxy="parent.someFunction('fixed argument', arg)"></div>

# Coffeescript
@app.directive 'panel', ->
  restrict: 'E'
  scope:
    parentFn: '&proxy'
  link: (scope) ->
    scope.parentFn(arg: 'the argument')

... calls parent.someFunction('fixed argument', 'the argument').


Tested in Angular 1.3.
Also see Angular directive scope binding with = (equals).

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