Primitives in the Chain of Prototypal Inheritance

Scope Make Think Hard

The Angular Menagerie is a little project I built in Angular.  While I used a tutorial as a starting point, I’m not interested in simple paint by numbers programming, so I worked in a good deal of remixing.  This approach leads to a level of “bonus education” and psychological torture that one just doesn’t get otherwise.  One of the bonus lessons I got with this experiment involved <announcer voice>Primitives in the Chain of Prototypal Inheritance.</Announcer_voice>  What is that, anthropology?  No!  Let the following tale of woe be a lesson to all those juniors who come after me.

The Angular app I built is a “store” that gets its inventory of product objects from JSON.  I wanted to use a modal view to display the reviews they contained.  So 2012, right?  Remember, it’s about the pain of learning.  Since I was already using Bootstrap for layout I first tried its built-in modal.  After much pain I learned (see how that works) that there was a documented Bootstrap/Angular incompatibility, so I switched to an Angular-only modal based on Adam Albrecht’s walkthrough.

Depending on how you set up your directive, its scope can be parent scope, a new child scope, or an isolate scope.  In Albrecht’s how-to, he’d set up an isolate scope, so I’d simply preceded from there.  I probably should have just switched to scope: true, but learning.  An isolate scope is basically just an isolated scope.  Why not, then, CALL them “Isolated Scopes” or “Scopes of Isolation” or such?  Scientifically speaking, the old “adjective+noun” approach used by grammarians and pedestrians just sounds too grammestrian.  An isolate scope is a way of turning off prototypal inheritance so that re-used code doesn’t interfere with parent code it’s dropped into.  It’s like a scope diaper.  Thus, baby scopes (who adorably refer to themselves as isowate scopes) can do their business, and get passed around to parent scope or uncle scope without making a mess.

To create a single <modal-dialog> which would open with dynamically loaded reviews I designed the product generation loop with a closure, so that each button passed its own product to ModalControl.  But I couldn’t get the modal to show.  My modal view was controlled via a single boolean in the parent-scope of each item, but objects created by ng-loops have their own scopes, and Javascript… is funny.  I know what you’re thinking.   “MommaScope has var showModal = false, so babyScope inherits that.”  You will be sobbing in your beer if that’s what you think.  It’d be true for { “showModal”: false }, but not for a lowly primitive false.  Why?  Well children don’t need to know EVERYthing their parents do, now do they?  Especially the more primitive stuff.  So I guess that’s why.

What’s really happening is that a child property is created that shadows the parent property.   Those of you who know this, go ahead and laugh in your beer, but it took this junior some beer-sobbing to learn this.  Thinking back, I’m like “Hah!  Naturally primitives, being the wild and undomesticated creatures they are, should not abide by Javascript’s 1st Commandment of prototypal inheritance!”   So here I was trying to use true/false to dictate whether <modal-view> was visible or not, across the holy bounds of scope, across which primitives shall not pass!  In the end I brute-forced it, and just defined the damn variable in $rootScope.  You want primitive!?  I can DO primitive!  Diapers-off, bare-fisted primitive!  Scope all up in your FACE!  Maybe I’ll get civilized later and change it to “scope: true” or define a service for it, but the whole point was to see what all those levers and buttons do.  The result?  Now I’m smarter about the thing.

Fun With Angular
Fun With Angular