<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>AngularJS directive life cycle methods</title>
</head>
<body>
<body ng-app="app">
EXAMPLE 1:
<div life-cycle name="first">FIRST
<div life-cycle name="..second">SECOND
<div life-cycle name="....third">THIRD
</div>
<div life-cycle name="....fourth">FOURTH
</div>
</div>
</div>
<hr> EXAMPLE 2:
<div life-cycle name="{{i}}" ng-repeat="i in [1,2,3]">{{i}}</div>
<article>
<ul>POINTS:
<li>Directive life cycle can be divided into 4 stages: compile, controller, pre-link, and post-link</li>
<li><b>Compile</b> is when angularJS traverses the DOM looking to match elements with directive declarations</li>
<li>During compile, neither the scope is available, nor is the directive template (i.e. the cloned instance of the directive) </li>
<li>What IS available, are the TEMPLATE element and TEMPLATE attributes</li>
<li>Compile is executed only once. For example if we had an ng-repeat on a custom directive, which makes, say, 3 instances of that directive, the compile function will be executed only once for all three.</li>
<li><b>Controller</b> executes next and we can set up the data and functions on the directive since the SCOPE IS NOW INITIALIZED</li>
<li>Do not use it for manipulating the DOM, that can be done in the (post-)link stage</li>
<li><b>Pre-link</b> executes immediately after the controller. Here, the DOM instance of the directive is cloned and available to be used/manipulated</li>
<li>However, should still wait till the (post-)link stage to perform DOM manipulations</li>
<li>Pre-link does have access to the set up scope, so can modify the data here</li>
<li>The scope data and the DOM instance have not yet been bound together though</li>
<li>Nor have any child directive instances been set up</li>
<li>Basically this is almost never used, since the data can be modified in the controller itself</li>
<li><b>Post-link</b>, or simple <b>Link</b> is the final stage before rendering the directive.</li>
<li>called link because here the scope and the instance are LINKED ie bound together</li>
<li>even all the child directives are ready ie have undergone linking which is why in the example, the post link functions execute in the reverse order (see console)</li>
<li>used mainly for doing any DOM manipulations</li>
</ul>
</article>
<hr> REFERENCES:
<ul>
<li>https://youtu.be/bjFqSyddCeA?t=20m7s</li>
</ul>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/01abhishekjain/angularjs-directive-life-cycle-methods-vpbLra */
var app = angular.module("app", []);
app.directive("lifeCycle", function() {
return {
compile: function(tElement, tAttributes) {
console.log(tAttributes.name + " compile");
if (tAttributes.name === "..second") tElement.css({ background: "red" });
if (tAttributes.name === "....third") tElement.css({ color: "yellow" });
return {
pre: function(scope, iElem, iAttrs) {
console.log(iAttrs.name + " pre-link");
},
post: function(scope, iElem, iAttrs) {
console.log(iAttrs.name + " post-link");
}
};
},
controller: [
"$scope",
"$element",
"$attrs",
function(scope, iElem, iAttrs) {
console.log(iAttrs.name + " controller");
}
]
};
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
v1.6.6
