AngularJS directives: scope isolation “=” and “@”

In this example I show you how to create AngularJS directives with an isolated scope, illustrating several ways to do it: “=”, “@”, true and false (default).

SOURCE CODE

The code below creates 5 directives with different scope isolation settings to demonstrate how they works.

In order to understand the differences I really suggest you to use ngInspector (or Batarang), a cool Chrome extension to see the structure of the scope of your AngularJS applications (as shown in the image below and in the video at the end of the post).

angularjs-directive-scope-isolation-result

index.html

app.js

controller.js

directive.js

VIDEO TUTORIAL (Italian only)

The following video tutorial (italian only) describes the concept of scope isolation.


Fabio Biondi

I am an italian developer with over 10+ years of experience in developing custom user interfaces and interactive applications for any screen and device using the latest web technologies - HTML5, SVG, Canvas, ES2015, CSS3 - the latest libraries - React, AngularJS, D3.js, CreateJS - and many other tools - Gulp, WebPack, LESS/SASS but also Sketch, Balsamiq, PS and AI.