“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.
Directives
Restrict
| 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
| 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. |
Require
| Option | Usage |
|---|---|
| directiveName | A camel-cased name that specifies which directive teh controller should come from. If our |
| ^ | 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. |
Recent Articles
Webflow Design Language
Learn about the structurally edited language that powers sites built with Webflow.
2 min read »
Using Webflow with Netlify
Configure Netlify to send particular routes to Webflow so that you can selectively serve pages that are designed and hosted on Webflow.
3 min read »
JSON Lisp
Learn about how programming languages work as we design & implement a little Lisp-like language called JSON Lisp.
14 min read »
Lazy Evaluation in JavaScript
JavaScript's call by sharing and getter semantics allow us to implement lazy evaluation for field access.
8 min read »