AngularJS


Scope & Controller

Gias Kay Lee

@gsklee / gsklee.im

Scope in AngularJS

is a plain old Javascript object

$scope

{

Inner Workings

    $$childHead: Child

    $$childTail: Child

    $$listeners: Object

    $$nextSibling: Child

    $$prevSibling: null

    $$watchers: Array[2]

Special Properties

    $id: '004'

    $parent: Child

User Definitions

    ...

}

Each

Controller Instance

has its own Scope

The properties of a Scope is the

corresponding Controller's

Model

And the

View Template

knows nothing about the Controller


...except those

exposed through the Scope

Kinda Like a ViewModel

Let's see some examples!

Demo #1



Scope & Controller



http://plnkr.co/edit/NmadopDytlpGijAZpbbU

Demo #2



ngRepeat



http://plnkr.co/edit/0j7hFLx1aUBatxOSIBp3

Demo #3



ngModel



http://plnkr.co/edit/fwGG2pKVdsJ0WK2q9lXA

Demo #4



Controller Instance



http://plnkr.co/edit/quBK2VPDFUHOg6iRanSy

Demo #5



Prototypal Inheritance

of

Scopes



http://plnkr.co/edit/5vM8s2C4ThSwJV4hpt3I

Demo #6



The Problem

with

Primitive Types



http://plnkr.co/edit/CA0VGMWx81U9vfdu5VaW

Demo #7



Passing Value

by

Reference



http://plnkr.co/edit/stX7ngZoJCXlI9aKMqmC

Demo #8



"Controller as" Syntax



http://plnkr.co/edit/jARP4GucDop2frmYpRWS

Questions?

Homework



http://plnkr.co/edit/if1X9a3agOs1JevfMCrP

AngularJS: Scope and Controller

By G. Kay Lee

AngularJS: Scope and Controller

  • 7,412