AngularJS – isolate scope – ‘@’ (pass by value)

Introduction

Objects can be passed into an angularJS directive in any one of the following ways:
By value using ‘@’
By reference using ‘=’
As a reference to a function in the parent controller using ‘&’

The next few blogs will detail each of these techniques.

This blog will detail the ‘@’ (by value technique).
For detail on creating an angularJS template via a directive please see this blog http://outbottle.com/using-templates-with-angularjs/

In this example we’ll use the notion of a driver and a car for illustration purposes. The car will be the directive/template and the driver will be the parent controller.

The driver can initialize the car with the lights on or off by passing in an attribute to the template. This is the focus of this blog.

Let’s look at example code:

HTML

 

JavaScript

 

JSFiddle

http://jsfiddle.net/jralston/jrz7Lub8/
The car has now been initialized with its lights off.

It’s possible to access the attribute through the isolate scope also. The following code achieves the same.

JavaScript

Note how defining the scope as so is equivalent to reading the attribute directly (although beware of earlier versions of Angular where the parameter passed in may be ‘undefined’ until angular is finished rendering. This annoyance has been rectified in recent versions of Angular).

While both techniques achieve the same, there is a fundamental difference between the two code examples.

The above snipped isolates the scope. What this means is that the controller and this directive now have different scopes. Before this, the directive had direct access to the controller scope. Now, it only sees the defined properties.

 

Here’s a JSFiddle demonstrating the isolate scope.

JSFiddle

http://jsfiddle.net/jralston/gbn9sco1/

Note how the directive simply inherits the lightStatus property of the scope, no further definition of assignation is required.

Pass by value ‘@’

To consolidate the notion of passing the the parameter by value using ‘@’ lets add the following to the controller.

$scope.lightStatus = “dimmed”;

This presents a question. Will the value of lights in the car now be “dimmed” or will it be “lightsStatus”?
Or put differently, are we passing in a reference to a variable ($scope.lightsStatus) or are we simply passing in a string with value “dimmed”?

Let’s take a look: http://jsfiddle.net/jralston/058352tL/

The answer is simple. We’re passing in a string value, not a reference to variable. This is determined by the fact that the parameter is received in the directive using ‘@’. If we used ‘=‘ then we would be passing a reference to $scope.lightsStatus. This notion is explored in the next tutorial.

Conclusion

This tutorial has examined the concept of passing a value to an angular directive by value using the ‘@’ technique.
JSFiddle code examples demonstrate the key points along the way.