After a long reading of documentation about AngularJS Directives in various blogs and sites.
I just came to know complete flow of directives
The flow will be from
Compile -> Controller -> preLink -> postLink or (Link)
If you want add any core Directives of angular(ng-model, ng-style,ng-src) at Compile Phase
var app;
app = angular.module('App', []);
app.directive('myDirective', [
'$compile', function($compile) { // Crucial Part
return {
scope: true,
compile: function(element, attrs) {
element.attr('ng-src', '{{imageModel}}');
element.attr('ng-click', 'updateImage()');
element.removeAttr('my-directive'); // Crucial Part
return {
pre: function(scope, ele, attb) {},
post: function(scope, ele, attb) {
$compile(ele)(scope);
return scope.updateImage = function() {
return scope.imageModel = "http://www.google.com/logos/doodles/2015/halet-cambels-99th-birthday-6544342839721984-hp2x.png";
};
}
};
},
controller: function($scope, $element, $attrs) {
return $scope.imageModel = null;
}
};
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
img {
max-width: 100%;
}
</style>
</head>
<body ng-app='App'>
<img src="https://www.google.co.in/images/srpr/logo11w.png" alt="" my-directive>
</body>
</html>
I will explain the necessary steps involved in it .
First phase (Compile) :-
Add the core angular directives or custom directives you want in this phase by
element.attr('ng-src', '{{imageModel}}'); // For dynamic image url changes
element.attr('ng-click', 'updateImage()'); // The trigger to update image
element.removeAttr('my-directive'); // **Crucial step please remove your custom directive attribute**
If you dont remove your Custom directive during $compile() it will loop infinite times
Second phase (Controller):-
Define all your models needed and function in these phase (I know i have defined updateImage() in postLink . It also works!)
$scope.imageModel = null // Initialization
Third phase (link) :-
The order is first preLink and then postLink .
I haven't defined anything in the prelink.
postLink :- $compile(element)(scope). This will actually bind compile all the directives involved in the element and it binds them dynamically.(vola). Everything works as desired.
Thanks. If you feel i have missed some points or misunderstood the concept, feel free to update it.
JSBin link https://jsbin.com/parote/edit?html,js,output
