If you are new to custom directives creation please have a look of part-1 of this series in the followed link : Custom Directives Part-1
In this part-2 lets discuss related to the concepts of compile & link keys using in custom directives.
Compile key in Custom Directive :
In general,for every directive there will be a compilation phase. This phase comes whenever the angular parser faces the directive for the element while parsing. pro grammatically this
phase will be carried out $compile service which is an in-built service in angular JS.
The compilation phase will happens for built-in directive or even for our custom directives which we create. The main theme that happens at compilation process is, creation of template that which renders over view or we can say just like loading the template to DOM that which is going to be rendered later(after linking phase) here template means our block of markup code which I discussed in part-1 of this series.
The compiling process takes place only once over the template. The members of scope can’t be accessed at this phase.
Let us assume that we provided css class to the template in compile function that we used in custom directive, then it effects to all over the places we used the directive by just processing once over the compile function.
What we can perform ?
In this section we can write only the code that which can share among all instances of the template. For example if we set the borders with specific CSS to this whole template. Then, wherever we use the template directive all over the places the CSS will effect.
In this part-2 lets discuss related to the concepts of compile & link keys using in custom directives.
Compile key in Custom Directive :
In general,for every directive there will be a compilation phase. This phase comes whenever the angular parser faces the directive for the element while parsing. pro grammatically this
phase will be carried out $compile service which is an in-built service in angular JS.
The compilation phase will happens for built-in directive or even for our custom directives which we create. The main theme that happens at compilation process is, creation of template that which renders over view or we can say just like loading the template to DOM that which is going to be rendered later(after linking phase) here template means our block of markup code which I discussed in part-1 of this series.
The compiling process takes place only once over the template. The members of scope can’t be accessed at this phase.
Let us assume that we provided css class to the template in compile function that we used in custom directive, then it effects to all over the places we used the directive by just processing once over the compile function.
What we can perform ?
In this section we can write only the code that which can share among all instances of the template. For example if we set the borders with specific CSS to this whole template. Then, wherever we use the template directive all over the places the CSS will effect.
If we are intended to have some kind of
functionality at the compilation phase over the template then we can provide by using the compile key
within the return function of custom directive creations as follows :
myapp.directive('ngMyDirective', function () {
return {
compile: function (telem,tattr) {
//our code. Effects to all
areas we used by compiling once.
}
}
});
In the above syntax, the compile property function
contains two parameters, former will hold the template details and the next
will be having the attributes of the template.
Sample Look :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.directive('myDirective',
function () {
return {
restrict: 'MAE',
compile: function (elem, attr) {
alert(attr.text);
}
}
});
myapp.controller("myctrl",
["$scope", function ($scope) {
}]);
</script>
View Code :
<body
ng-app="myapp" ng-controller="myctrl">
<div my-directive text="MyText"></div>
</body>
Link in custom directive :
The link execution takes after the process of
compilation phase. As we knew the compilation phase creates the template of our
directive, the link phase will create the instance for the template of our
directive. The rendering of the element occurs after the completion of the
linking phase.
Controller Key :
In general, the any kind of controller itself will be having its own directive. The controller key can be mapped to the directive that we had created. Controller is the place where the initialization of scope members taking place which can allow us to manipulate even DOM with the concern required data. We are not allowed to perform any functionalities over the child element as they will not be in active mode at this phase.
In general, the any kind of controller itself will be having its own directive. The controller key can be mapped to the directive that we had created. Controller is the place where the initialization of scope members taking place which can allow us to manipulate even DOM with the concern required data. We are not allowed to perform any functionalities over the child element as they will not be in active mode at this phase.
Sample Look :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.directive('myDirective',
function () {
return {
restrict: 'MAE',
compile: function (elem, attr) {
alert(attr.text + "From compile");
},
controller: function ($scope, $element, $attrs) {
alert($attrs.text + "From Controller");
}
}
});
myapp.controller("myctrl",
["$scope", function ($scope) {
}]);
</script>
View Code :
<body
ng-app="myapp" ng-controller="myctrl">
<div my-directive text="MyText"></div>
</body>
Pre & Post Links
Pre-link : Pre-Link is the phase which executes after the controller.The child elements under the directives that are used/present can be accessed. At this phase we cannot access or set the required data to the child elements of the directive.The scope which is available in controller phase, can also access in this phase. Manipulations to the DOM is not suggested at this stage. We can’t set watchers to the scope members even though the scope members are available at this phase.
Post link : In this stage, the rendering of the directive will be taking place. The child elements under the directives that are used/present can be accessed. Events can be also added at this phase. Let us assume that our directive contains a button, for that button we can add an click event listener.In this post link we can even set up the watches to our required model members.
An important thing here is that the compile functions return type will be as the pre and post link functions returning objects as follows :
Pre-link : Pre-Link is the phase which executes after the controller.The child elements under the directives that are used/present can be accessed. At this phase we cannot access or set the required data to the child elements of the directive.The scope which is available in controller phase, can also access in this phase. Manipulations to the DOM is not suggested at this stage. We can’t set watchers to the scope members even though the scope members are available at this phase.
Post link : In this stage, the rendering of the directive will be taking place. The child elements under the directives that are used/present can be accessed. Events can be also added at this phase. Let us assume that our directive contains a button, for that button we can add an click event listener.In this post link we can even set up the watches to our required model members.
An important thing here is that the compile functions return type will be as the pre and post link functions returning objects as follows :
Sample Look for Pre & Post links:
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.directive('myDirective',
function () {
return {
restrict: 'MAE',
compile: function (elem, attr) {
alert(attr.text + "From compile");
return {
pre: function () { alert('pre linking') },
post: function () { alert('post lonking') }
}
},
controller: function ($scope, $element, $attrs) {
alert($attrs.text + "From Controller");
}
}
});
myapp.controller("myctrl",
["$scope", function ($scope) {
}]);
</script>
View Code :
<body
ng-app="myapp" ng-controller="myctrl">
<div my-directive text="MyText"></div>
</body>
Execution flow of above code :
If we run the above code, the execution process will be goes on as follows :
If we run the above code, the execution process will be goes on as follows :
- First starts up executing the Compile function.
- After Compiling phase it goes over the controller function.
- Next to the controller it goes over the pre-link which is the outcome of compile phase.
- After executing the pre function, the execution goes over to the post function.
To be continued by part-3
No comments:
Post a Comment