Chapter 8What is great is that the built-in directives are defined using the same directive
API that we can use in our own applications. There is nothing special about them
as compared to directives that application developers can build. Looking at the
directives in the AngularJS source code can be a great way to learn how to develop
your own directives.
The built-in AngularJS directives can be found in the src/ng/
directive folder of the AngularJS project (https://github.com/
angular/angular.js/tree/master/src/ng/directive/).Using directives in the HTML markup
Directives can appear as HTML elements, attributes, comments, or CSS classes.
Also, any directive can be identified in the HTML in a number of different formats.
Here are some examples of using a directive in the HTML mark-up (not all of these
would be appropriate depending on the use of the directive):
<my-directive></my-directive>
<input my-directive>
<!-- directive: my-directive-->
<input class="my-directive">The canonical name, when used to define and refer to a directive in JavaScript, is the
camelCased version, for example, myDirective.
Following the directive compilation life-cycle
When AngularJS compiles an HTML template it traverses the DOM supplied by the
browser and tries to match each element, attribute, comment, and CSS class against
its list of registered directives. When it matches a directive, AngularJS calls the
directive's compile function, which returns a linking function. AngularJS collects all
of these linking functions.
The compilation stage is done before the scope has been
prepared, and no scope data is available in the compile function.Once all the directives have been compiled, AngularJS creates the scope and links
each directive to the scope by calling each of the linking functions.