Simplify Directives with Scope Inheritance in AngularJS

irectives in AngularJS are essential building blocks providing reuse and keeping code modular, especially in a large app. We have written a fair number of these at RealScout for common components. Some are simple such as a custom drop down, color picker and sticky footer but others are fairly involved such as a photo uploader and typeahead. Keeping the directives light-weight, yet scalable has presented an interesting challenge. In this post, we will share the design of our Action Items Directive, in which we make creative use of scope inheritance to share behavior. The directive holds a list of messages, sort of like the Facebook news feed.