AngularJS – isolate scope – ‘&’ (function reference)

Introduction

This blog demonstrates how to pass a reference to a function to an angular directive/template.

The way in which the child directive/template calls the parent is also demonstrated.

The example is available as a working JSFiddle here.

This tutorial details creating directive/templates in general (without an isolated scope).

This tutorial demonstrates passing values by value to angular directives/templates (@).

This tutorial demonstrates passing values by reference to angular directives/templates (=).

 HTML

 

The markup shows two things:

  1. The template which is identified by the DOM id ‘carTemplate’. The template is hidden so it doesn’t appear in its current location in the document. The contents of the template will be copied by angular to everywhere the <car-template> element is found.
  2. The insertion of the template within the parent controller. I.e. the <car-template> element.

JavaScript

 

AS per this introductory blog the directive is defined to restrict on an element (as opposed to a class or an attribute). “E” is element, “C” and “A” are the alternatives. In other words, when angular scans the DOM, it will replace the element <cat-template> with the template specified (I.e. the innerHTML of our element marked by DOM id ‘carTemplate’). replace means that, the custom element <car-template> will be replaced rather than populated. The link function is what binds the JS code to the template instance. The camel case carTemplate matches the hyphenated <car-template> (his is just how things are in AngularJS).

Importantly, the scope property is specified meaning that the parent scope is no longer inherited. We’re now limiting the scope inheritance to just the properties specified.

In this example the inheritance is a single reference to a function. The ‘&’ (as opposed to ‘@’ or ‘=’) is what tells angular that this is a function type. I.e. the function specified here is a function within the parent. In this case the parent is the controller but it could easily be a parent directive. The parent, i.e. the directive/template code (the code in the link function) can invoke this parent function.

JSFiddle

Working example is here.

 

Invoking the parent function

The syntax for this needs to be specific.

It is simply,

$scope.callBack({‘obj’: {hello:’there’}});

An object is passed to the parent, the properties of the object are the argument names and the corresponding values are the parameter values.

This matches what was defined as a parameter to the template, i.e.

<car-template call-back=”callMe(obj)” ></car-template>

 

Conclusion

This blog is the fourth in the series demonstrating angular directives that are used as templates. How to pass a reference to a function to a directive has been demonstrated along with the technique used to invoke that function.

The other tutorials in the series are here:

This tutorial details creating directive/templates in general (without an isolated scope).

This tutorial demonstrates passing values by value to angular directives/templates (@).

This tutorial demonstrates passing values by reference to angular directives/templates (=).

 

Comments always welcome.