<body ng-app="app">
    <my-dad>
        {{greeting}}
        <br/>
        <my-son>
            {{sonSays}}
        </my-son>
    </my-dad>
var app = angular.module('app', []);
            app.directive('myDad', function () {
                return {
                    restrict: 'E',
                    controller: function ($scope) {
                        $scope.name = 'XXX';
                        $scope.greeting = 'Hello!';
                        $scope.click1 = function(){
                            alert('click1');
                        }
                        $scope.click2 = function(){
                            alert('click2');
                        }
                    },
                    compile: function(tHtml,tAttr){
                        tHtml.append('<div ng-click="click1();">Adding New Link in Complie with ng-click</div>')
                        return {
                            post: function(scope,ele,attr){
                                ele.append('<div ng-click="click2();">Adding New Link In Post Link with ng-click</div>')
                            }
                        }
                    }
                };
            });
            app.directive('mySon', function () {
                return {
                    restrict: 'E',
                    require: '^myDad',
                    link: function (scope, elem, attr) {
                        scope.sonSays = 'Hey, I am son, and my dad is ' + scope.name;
                    }
                };
            });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://code.angularjs.org/1.3.8/angular.min.js