What is the difference between link and compile in AngularJS?
Vaibhav KothiaLink: Link is used to bind the scope of the controller to the view. It is used to create a connection between the view and the controller. It is used to attach event handlers to the view and to manipulate the DOM elements of the view.
Example:
app.controller(‘MyCtrl’, function($scope){
$scope.myFunc = function(){
alert(‘clicked!’);
}
});
app.directive(‘myDirective’, function(){
return {
link: function($scope, element, attrs){
element.on(‘click’, function(){
$scope.myFunc();
});
}
};
});
Compile: Compile is used to traverse the DOM and collect all of the directives. It is used to collect all of the directives and to create a linking function which will be used to bind the view to the scope.
Example:
app.controller(‘MyCtrl’, function($scope){
$scope.myFunc = function(){
alert(‘clicked!’);
}
});
app.directive(‘myDirective’, function(){
return {
compile: function($element, $attrs){
$element.on(‘click’, function(){
$scope.myFunc();
});
}
};
});
