Welcome to Part 4 of this review of the Pluralsight course Angular Best Practices by Joe Eames.

Joe has worked both full and part time as a technical teacher for over ten years.

He has produced 18 courses for Pluralsight.

Dealing with Scope

Understanding how scopes work and how they interact is critical to taking Angular development to the next level.

When we can’t understand which scope we are binding to, or don’t know how to correctly bind to items on other scopes, it can be very frustrating.

Batarang

Batarang is a Chrome extension and you can find it here: https://chrome.google.com/webstore/search/batarang

Joe says Batarang is really good at helping us to see our scopes and the data within them.

There are very mixed reviews for Batarang. If you don’t like it, you might want to try http://ng-inspector.org/ instead.

Bruno Daniel (author of ng-inspector) gives a comparison of the two at https://github.com/rev087/ng-inspector/issues/18 its a couple of years old but still gives you some idea.

We see a number of Batarang’s features demonstrated in this lesson. There’s a new “AngularJS” tab in the dev tools.

In here there are sections for Model, Performance, Dependencies, Options and Help.

Model

In the models tab it shows every scope inside our application. By clicking on one of the it shows the data that exists in it.

We also see the Enable Inspector feature. This lets us select elements on the page and it shows the scope that corresponds to that element.

Performance

This shows a Watch Tree of all items that are watched, and the watch expressions along with the relative and absolute times that they take.

Dependencies

The relationship of Service Dependencies is shown. Hover over any service dependency to see red or green.

– Green means dependencies depend on it
– Red means it is dependant on other dependencies

Options

Checkboxes to turn on/off applications, bindings and scopes

When one of these is enabled, it draws a border around the relevant elements.

We also see how to go directly to the scope element in the DOM viewer.

Scope Overview

All binding and all interaction happens through a scope.

Angular always begins with a root scope, as shown in the previous video clip.

All scopes belong to one element
As we saw in the Directives module, there are three scope relationship types:

– Shared Scope (no scope key in directive declaration)
– Inherited Scope (scope key set to true)
– Isolated Scope

We see diagrams explaining each of the ngRepeat Directive Scopes.

Creating Scopes

Scopes are created by directives. Controllers set up the scopes, but directives actually create them.

Sharing Scope

This lesson is an in depth look at directives which share scope with other directives.

The custom directive in the example outputs the count of Harry Potter’s instructors.

Inheriting Scope

This lesson is an in depth look at directives that inherit scope.

We use the same example as before, but with inherited scope. In the driective declaration we have the line:

scope: true

Joe shows us the difference using Batarang.

Quiz
1. What items on a parent scope can a child inherited scope see?
2. How do you correctly bind an ngModel to a parent scope item?
3. When two directives are on the same element, what is the relationship between their scopes?

Isolating Scope

This lesson is an in depth look at directives that inherit scope.

Quiz
1. What does an empty object on the scope property of a directive do?
2. When setting the value of a binding to an isolated scope in HTML, which casing do you use?
3. When multiple directives are on the same element, and one asks for an isolated scope, what happens?