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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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)