How to get controller scope from multi-level directives in AngularJS(without $parent)

Question

How can I access controller scope from multi-level directives in below structure:

I create a directive that has multi-level scopes inside its.

 1. Controller scope
 1.2. Directive1 scope(main directive)
 1.2.1. Directive2 scope
 1.2.1.1 Directive3 scope

I want to get the controller scope from directive 3.

please don't refer to $parent because the parent level it's not certain and a user may use this directive inside another directive.(see below codes)

<div ng-controller="Test">
   <custom-dir>
      <dir1>
         <dir2>
            <dir3>
            </dir3>
          </dir2>
       </dir1>
    <custom-dir>
</div>

The users create a function in the Test controller and the function will be called in my Directive 3 scope(how to get controller scope?).

<div ng-controller="Test">
     <dir1>
         <dir2>
             <dir3>
             </dir3>
         </dir2>
     </dir1>
</div>

More details(please don't refer to syntax error):

The controller is:

App.controller('ScopeController', function ($scope, $rootScope, $uibModal, $http, $filter, $cookieStore, Common, $cookies) {
    $scope.runTest = function () {
        return `<input type='button' ng-click='testHtml()' value='Test'/>`;
    }
    $scope.testHtml = function () {
        alert("work");
    }
    $scope.model=someModel;
    $scope.config=someConfig;
    $scope.columns={html: $scope.runTest};
});

the dir1 directive:

App.directive("dir1", function ($compile, $filter, $rootScope, $timeout, Common, $window, $http) {
    return {
        restrict: "E",
        priority: 1,
        terminal: false,
        templateUrl: "Content/html/Table.html?version=2.6",
        scope: {
            model: "=",
            columns: "=",
            config: "=",
            search: "@",
        },
        link: function (scope, elem, attrs) {
            scope.CallFunc = function (html) {
                if (typeof (html) =="function" )
                    return html();
                else {
                    return scope.$parent.$eval(html + "()", {});
                }
            }
        }
    }
});

the dynamic directive compile the runTest output

App.directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace:true,
        link: function (scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function (html) {
                ele.html(html);
                $compile(ele.contents())(scope);
            });
        }
    };
});

If I change the line $compile(ele.contents())(scope); to $compile(ele.contents())(scope.$parent.$parent); it's work.

In this directive, I need get the controller scope without $parent because some users may use this directive inside another directive same below:

<custom-dir>
    <dir1 model="model" columns="columns" config="config">
        <div dynamic="CallFunc(columns.html)"></div>
    </dir1>
</custom-dir>

The using HTML tag

<dir1 model="model" columns="columns" config="config">
    <div dynamic="CallFunc(columns.html)"></div>
</dir1>

Answer 1

This issue handle with following codes:

A service for storing the controller scope:

App.service('TableService', function () {
        return {
            MyScope: null
        };
    });

Inject the TableService to dynamic directive(this directive compiles dynamic content):

App.directive('dynamic', function ($compile,TableService) {
    return {
        restrict: 'A',
        replace:true,
        link: function (scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function (html) {
                ele.html(html);
                $compile(ele.contents())(TableService.MyScope);
            });
        }
    };
});

And finally in the controller:

App.controller('ScopeController', function ($scope, $rootScope, $uibModal, 
              $http, $filter, $cookieStore, Common, $cookies,TableService) {
    TableService.myScope = $scope;        
    $scope.runTest = function () {
        return `<input type='button' ng-click='testHtml()' value='Test'/>`;
    }
    $scope.testHtml = function () {
        alert("work");
    }
    $scope.model=someModel;
    $scope.config=someConfig;
    $scope.columns={html: $scope.runTest};
});

After that, the dynamic directive can access controller scope and all dynamic events(like testHtml) will be called even if the directive put in another directive(without using the $parent).

thank you @shaunhusain, huan feng for giving me an idea.

Answer 2

In child controller do something like:

$scope.$broadcast('yourEvent');

In parent controller do the listener:

$scope.$on('yourEvent' , function(){
    //Handle your logic            
});

Answer 3

A special case service

.service('DirectDispatcher', function(){
  return {
    fireMe: angular.noop
  }
});

First directive registers a function callback

.directive(
...
  link:function(DirectDispatcher){
    function myHandler() {window.alert('just testing')}
    DirectDispatcher.fireMe = myHandler;
  }

... );

Second directive fires the function callback

.directive(
...
  link:function(DirectDispatcher){
    DirectDispatcher.fireMe();
  }

...
);