So, back to Angular. The first thing we'll focus on is directives.
Directives
There are lots of built in directives. Read over this cheat sheet and learn how they work.
How Directives Work
Directives identify parts of the DOM that should have special Angular goodness. These parts are picked up by the compiler (see $compile).Directives are attached to modules using the
directive method of the $compileProvider.What is a directiveFactory?
The directive factory is executed the first time the compiler matches the directive. The function returns an object that tells $compile (see Directive Definition Object) how the directive works.
Making Custom Directives
A Simple Example
angular.module('foo').directive('pointless', function () {
return {
template: 'some text to show in directive'
};
});
Isolate Scope
The purpose is to isolate the scope within the directive from the scope outside the directive. This is done with thescope option of the directive definition object.The isolate scope does not inherit from the parent scope.
The scope option maps outer scope values to inner scope values in three different ways.
- @ - map from directive's attributes as strings
-
innerFoo: '@'The inner scope'sinnerFoovalue comes from the directive'sinner-fooattribute. -
innerFoo: '@outerFoo'The inner scope'sinnerFoovalue comes from the directive'souter-fooattribute. - Any interpolated values (defined in the directive's attribute to pull from the outer scope) will still populate from the outer scope.
-
- = - map from parent scope property to isolate scope property
-
innerBar: '='- The inner scope'sinnerBarvalue is bound to the outer scope value indicated in the directive'sinner-barattribute. -
innerBar: '=outerBar'- The inner scope'sinnerBarvalue is bound to the outer scope value indicated in the directive'souter-barattribute. - Values bound like this will update each other. Changes in the isolate scope will be reflected in the outer scope and vice versa.
-
- & - map an expression to be executed in the outer scope
- This follows the same pattern as above, though I can't think up an example.
