"Leave other people's mistakes where they lie."Marcus Aurelius, Meditations Book 9:20
Angular Cheat Sheet

Update August 11, 2018 - Hall of Shame

This article is a Hall of Shamer™ because I've not ensured its relevance with the latest in Angular.js. I brought it back by request.



Character Declaration Style Example
E element <hello to="world"></hello>
A attribute <div hello="world"></div>
C class <div class="hello:world"></div>
M comment <!--directive:hello World -->


Scope Type Syntax Description
existing scope scope: false (default) The existing scope for the directive's DOM element.
new scope scope: true A new scope that inherits from your enclosing controller's scope prototypically. This scope will be shared with any other directive on your DOM element that request this kind of scope and can be used to communicate with them.
isolate scope scope: { attributeName: 'BINDING_STRATEGY' } or { attributeAlias: 'BINDING_STRATEGY' + 'attributeName' } An isolate scope that inherits no properties from the parent, you can however access the parent scope using $parent.

Scope Binding Strategies

Symbol Meaning
@ Pass this attribute as a string. You can bind values to the parent scope using {{interpolation}}.
= Data bind this property to the directive's parent scope.
& Pass in a function from the parent scope to be called later. Used to pass around lazily evaluated angular expressions.


Option Usage
directiveName A camel-cased name that specifies which directive teh controller should come from. If our directive needs to find a controller on it's parent we would write "dialog".
^ By default, Angular gets the controller from the named directive on the same element. Adding this symbol says to walk up the DOM to find the directiev. For the dialog example with would need to add this symbol "^dialog". This means, look up till you find the parent dialog directive and give me that controller.
? Makes the required controller optional, otherwise Angular would throw an exception if it couldn't find it.