linkFn in angular directives is not working?

Question

var $directive = angular.module('myApp', []);
    $directive.directive('chandanSingh', function(){
      return {
          restrict: 'E',
         compile:function(element, attrs){
               console.log('This is complie');
         },
         link: function(scope, element, attrs){
              console.log('This is link');
         },
         template: '<h4>{{title}}</h4>',
         controller:function($scope){
               $scope.title = "My Directive";
         }
    };
});

<chandan-singh></chandan-singh>

Above is my angular code for directive and HTML directive. i am trying to use "link: linkFn" of directives while using compile in it. Is it even possible to use both compile and link for same directive?

Can anyone help me out with this? what is it i am missing to make it work?

Answer 1

when you use a compile function, it must return the link function. Otherwise it won't work:

     compile:function(element, attrs){
           console.log('This is complie');

           return function link(scope, element, attrs){
                console.log('This is link');
           },
     },