detecting whether a directive attribute has been provided or not

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script>
</head>

<body ng-controller="MainCtrl as vm">
  Directive where I passed the data:<br/>
  <my-directive click-fn="vm.someFunction()"></my-directive>
  
  <br/>
  
  Directive where the property is not set (nothing should be visible):<br />
  <my-directive></my-directive>
  
  <script>
    angular.module('plunker', [])
      .controller('MainCtrl', function(){
        var vm = this;
        
        vm.someFunction = function(){
          alert('Hi');
        };
      })
      .directive('myDirective', function() {
        return {
          restrict: 'E',
          scope: {
            data: '=',
            clickFn: '&'
          },
          template: '<div ng-show="isFn" style="border: 1px solid; padding:5px"><a href="#" ng-click="clickFn()">Click me</a></div>',
          link: function($scope, iElem, iAttr){
            console.log($scope.clickFn);
            $scope.isFn = angular.isUndefined(iAttr.clickFn) === false;
          }
        };
      });      
  </script>
</body>

</html>

/* Put your css in here */

.widget {
  border: 1px solid;
  padding: 5px;
}

label {
  font-weight: bold;
}