Every once in a while when I’m working on something, I’ll have a moment that is humbling, time consuming, and extremely frustrating.
I had a moment like that this past weekend, and it ate about two hours of my Saturday. I was lucky no one was home during, because boy was I cursing like a sailor at my computer.
So. What happened?
The Problem
Like most days and weekends, I spent some time working through various tasks on my website randomanime.org. This particular day I was reworking the way modals work on the website.
The website is an AngularJS site. I was moving the site’s modals into a custom directive. One thing I wanted was for the modals to not be a part of the page if they weren’t visible, so I was going to use the good ‘ol ng-if statement to remove it.
That’s when everything just stopped working.
The modal has a form in it, and everything was returning undefined. I quickly scanned for typos, but found none. As I searched and searched for a reason why, I was becoming more and more frustrated. I commented out the entire directive, making quick tests and such to see if it was a naming issue.
Undefined. Undefined. Undefined.
After quite a lot of cursing, I took to the internet.
The Solution
Simple and to the point: The ng-if directive creates a child scope.
That one, simple sentence could’ve saved me two hours of headache. When I figured it out, I literally had to walk away from my computer and go get a drink. Honestly, I should’ve started with that…
<div data-ng-if="foo" data-ng-class="{ 'bar': $parent.foo }">
<!-- within child scope -->
<p>{{ $parent.foo }}</p>
</div>
So in order to solve all of my problems, I either had to save a reference to $parent when I use an ng-if statement, or just use $parent.modelName whenever I referenced something. It’s actually kind of annoying, but makes sense now.
Bonus Headache
I’ve never really used directives much, until now. I’ve started to discover just how useful they are. Maybe I’m more of a noob at AngularJS than I thought. Anyway, I ran into another headache with directives.
There was a naming conflict between two separate directives. This occurred since they both have forms, so there was a submit function attached to their scopes. I did not realize that directives can inherit scope unless you reset it in the return statement.
return {
// other stuff
scope: {}
}
This solution was simple…after I figured out what was happening. A quick Google search later, and I realized that I had to reset the scope. Easy enough.
Conclusion
There was a lot of frustration this weekend. It just goes to show just how much I don’t know. It’s kind of overwhelming when I think about it.
Oh well, at least I learned something, right?
Thanks for listening to me vent.