Scope in AngularJSTo Duc Thien - June 23, 2016

Contents

• Overview• JavaScript prototypal inheritance• Angular scope inheritance• Q&A

Overview: Scopes

What's scopes?• The source of truth for application state

• Execution context for expression• Map mimics DOM structure• Agency to watch expression and propagate events

Overview: Scopes

Scopes' main features:• Observe model mutations ($watch)• Propagate model changes to whole application ($apply)• Can be nested to limit access from other components• Provide execution environment to evaluate expressions

E.g: {{2 + 3}}

Overview: Scope

$rootScope and $scope• $rootScope: global context in Angular apps

Parents of all $scope object, initialize with Angular application<div ng-app="App"></div>

• $scope: peculiar data model objectConnection between controller and viewangular.module('App', []).controller('AppController', function($scope) {...});angular.module('App', []).directive('myDirective', function(){ return { controller: function($scope) { ... }, link: function(scope, element, attr) { ... } }});

Overview: Scope

Scope life cycle• Creation• Watcher registration• Model mutation• Mutation observation• Destruction

Javascript prototypal inheritance

function Human(name) { this.name = name; } Human.prototype.say = function() { console.log('I am an' + this.name); } var myDad = new Human('Billionaire'); myDad.money = 1000000; myDad.cars = ['BMW X6', 'RR Phantom', 'Maybach']; myDad.houses = {hanoi: 200, saigon: 500}; var me = Object.create(myDad); me.money = -50000; me.cars[1] = "Honda Super Dream"; me.houses.hanoi = 100;

Human

myDad

Cars: ['BMW X6', 'RR Phantom','Maybach']

Money: 1000000

houses: {hanoi: 200, saigon: 500}

meMoney: -50000

Javascript prototypal inheritance

• To find a property in child object• Searching in child object

• Not found -> looking in inherited object

• New properties of child object will hide/shadows parent property with the same name

• If objects are found in parent, the property will be updated on original object

Angular scope inheritance

Normal prototypal scope inheritance in AngularJS• Ng-controller• Ng-include• Ng-switch• Directive with scope: true

Angular scope inheritance

Ng-repeat • Normal prototypal inheritance with copy/assignment• Each iteration create new child scope• Child scopes get new properties

childScope = scope.$new(); // child scope prototypically inherits from parent scope ... childScope[valueIdent] = value; // creates a new childScope property

Angular scope inheritance

Directive - isolated scope (scope: {...})• Not prototypal inheritance• Various option to access parent scopes through attributes:

• '=': two-way data binding

• '@': one-way data binding

• '&': bind to parent expression

Angular scope inheritance

Directive - transcluded scope (transcluded: true)• Beside of isolated scope, new transcluded

scope is created• New transcluded scope is inherited from parent

scope• Avoid child scope hiding/shadowing parent

scope's properties• Both isolated scope and transcluded scope can

access to parent scope through $parent

References

• https://docs.angularjs.org/guide/scope• https://github.com/angular/angular.js/wiki/Understanding-Scopes#ja

vascript-prototypal-inheritance• ng-book - The in-depth, complete, and up-to-date book on Angular.

Become an AngularJS expert today.

Thank you