Scope and $digest

Into into internals of angular scope

Transcript

1. SCOPE AND $DIGEST Created by @pitr
2. WHAT'S THE CORE OF ANGULAR? dependency injection? (likely to be removed) routes? (separate module) controllers? (simple 20 line provider) directives? (close) NO... it's scope
3. WHAT IS SCOPE? f u n c t i o n S c o p e ( ) { t h i s . $ i d = n e x t U i d ( ) t h i s . $ $ w a t c h e r s = [ ] } v a r $ r o o t S c o p e = n e w S c o p e ( ) That's all there is to it! PS All code is extremely simplified
4. HOW IS IT MADE? S c o p e . p r o t o t y p e . $ n e w = f u n c t i o n ( ) { v a r C h i l d = f u n c t i o n ( ) { } C h i l d . p r o t o t y p e = t h i s c h i l d = n e w C h i l d ( ) c h i l d . $ p a r e n t = t h i s r e t u r n c h i l d }
6. WHAT IS THE MAIN THING IT DOES? Watching things! S c o p e . p r o t o t y p e . $ w a t c h = f u n c t i o n ( w a t c h E x p , l i s t e n e r ) { t h i s . $ $ w a t c h e r s . p u s h ( { f n : l i s t e n e r , e x p : w a t c h E x p } ) } There is also $ w a t c h C o l l e c t i o n
7. HOW DOES IT WATCH THINGS? Let's start with $apply S c o p e . p r o t o t y p e . $ a p p l y = f u n c t i o n ( f n ) { t h i s . $ e v a l ( f n ) $ r o o t S c o p e . $ d i g e s t ( ) }
8. AND $DIGEST? $ d i g e s t : f u n c t i o n ( ) { / / f o r t h i s s c o p e a n d a l l i t s c h i l d r e n , / / g o t h r o u g h a l l w a t c h e r s a n d / / c o m p a r e t o t h e i r l a s t v a l u e f o r ( s c o p e i n [ t h i s , * c h i l d r e n S c o p e s ] ) { f o r ( w a t c h i n s c o p e . $ $ w a t c h e r s ) { i f ( w a t c h . e x p ( ) ! = = w a t c h . l a s t ) { d i r t y = t r u e w a t c h . l a s t = w a t c h . e x p ( ) w a t c h . f n ( ) } } } }
9. BUT WAIT.. $ d i g e s t : f u n c t i o n ( ) { d o { w h i l e ( t h i s . $ $ a s y n c Q u e u e . l e n g t h ) { a s y n c T a s k = t h i s . $ $ a s y n c Q u e u e . s h i f t ( ) a s y n c T a s k . s c o p e . $ e v a l ( a s y n c T a s k . e x p r e s s i o n ) } f o r ( s c o p e i n [ t h i s , * c h i l d r e n S c o p e s ] ) { f o r ( w a t c h i n s c o p e . $ $ w a t c h e r s ) { i f ( w a t c h . g e t ( ) ! = = w a t c h . l a s t ) { d i r t y = t r u e w a t c h . l a s t = w a t c h . g e t ( ) } } } } w h i l e ( d i r t y | | a s y n c Q u e u e . l e n g t h ) }
10. WHY?? What's this async queue and why do we need it?
11. HOW DOES IT WORK? $ e v a l A s y n c : f u n c t i o n ( e x p r ) { t h i s . $ $ a s y n c Q u e u e . p u s h ( { s c o p e : t h i s , e x p r e s s i o n : e x p r } ) }
12. WHEN TO USE? d o S o m e t h i n g ( ) / / U S U A L L Y B A D $ t i m e o u t ( f u n c t i o n ( ) { d o S o m e t h i n g A l m o s t R i g h t A w a y ( ) } )
13. WHAT IS $TIMEOUT? f u n c t i o n t i m e o u t ( f n , d e l a y ) { s e t T i m e o u t ( f u n c t i o n ( ) { f n ( ) $ r o o t S c o p e . $ a p p l y ( ) } , d e l a y ) } Run function and then a full $apply phase
14. SOLUTION d o S o m e t h i n g ( ) / / U S U A L L Y B A D $ t i m e o u t ( f u n c t i o n ( ) { d o S o m e t h i n g A l m o s t R i g h t A w a y ( ) } ) / / G O O D $ s c o p e . $ e v a l A s y n c ( f u n c t i o n ( ) { d o S o m e t h i n g A l m o s t R i g h t A w a y ( ) } ) Runs during a $digest phase
15. ANOTHER EXAMPLE Sometimes in places like factories, you do not know if running within a $digest phase / / B A D d o S o m e t h i n g ( ) $ r o o t S c o p e . $ a p p l y ( ) u n l e s s $ r o o t S c o p e . $ $ p h a s e / / G O O D $ s c o p e . $ e v a l A s y n c ( d o S o m e t h i n g ) This schedules a $digest phase if one isn't running
16. NOW A SMALL SECRET ABOUT $APPLY If you remember code for $apply: $ a p p l y : f u n c t i o n ( e x p r ) { t h i s . $ e v a l ( e x p r ) $ r o o t S c o p e . $ d i g e s t ( ) } Running $apply on ANY scope will trigger a $digest phase on ALL scopes. If you need to dirty check only one scope, run digest on it manually: $ s c o p e . $ d i g e s t ( )
17. FIN