Directives, compile and link

Description

A-Level Angular Note on Directives, compile and link, created by James Drummond on 06/01/2015.
James Drummond
Note by James Drummond, updated more than 1 year ago
James Drummond
Created by James Drummond almost 10 years ago
13
1

Resource summary

Page 1

See: http://www.sitepoint.com/practical-guide-angularjs-directives/

See also: http://stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function...Compile function: Use for *template* (as opposed to instance) manipulation. Changes apply to all DOM clones of the template associated with the directive. - The compile function does *not* receive a scope argument.*** Important ***The compile function receives the attributes of the directive element as an argument. So a good use case for using compile would be adding a class to the element which is registered on the directive as an attributeLink function: Use for registering DOM listeners (i.e. $watch listeners on the instance scope) as well as instance DOM manipulation. - It is executed *after* the template has been cloned

See: http://stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function...Be sure that you understand the difference between:The Compiler Service - Angular service that traverses the DOM looking for attributes.And the compilation process which happens in two phases: - Compile. Traverse the DOM looking for all the directives. The result is a linking function. - Link. Combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view and any user interactions with the view are reflected in the scope model, making the scope model the single source of truth.If you are going to make DOM transformations, it should be compile. If you want to add some features that are behavior changes, it should be in link.

See: http://stackoverflow.com/questions/24615103/angular-directives-when-and-how-to-use-compile-controlle... ** This is a very good link **Also: http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/ ** This is very good as well **

How does Angular process directives? 1. When the DOM is ready, Angular starts to process the page, looking for the ng-app directive. At that point, Angular begins to recursively parse the page, looking for other directives. 2. Angular compiles all directives before linking them to their scope.

Show full summary Hide full summary

Similar

Angular Nuts and Bolts
James Drummond
Directives and scope
James Drummond
How Angular works
James Drummond
The Princeton Review Chapter 9 Rotational Motion
Anibal Santamaria
Angular
Kingsley Bawuah
JavaScript Fundamentals
Andrew Watters
Front-End Web Development
Chanthy Ngin
AngularJS - Quiz - Jan 2016
arunram.krish
Direct Effect - European Union
Tatiana Nikolaid
Scope and Inheritance in Angular
James Drummond
Direct Effect - EU Public Law
Tatiana Nikolaid