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

Posted . Visible to the public.

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')

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).

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-01 09:51)