AngularJS: доступ директива от контроллера

Question

фона

У меня есть директива верхнего уровня, который должен быть доступно с помощью контроллера. Пожалуйста, подумайте об этом Plunk.

Директива

app.directive('topDirective', ['$compile', function($scope){ 
    return { 
    scope: {}, 
    restrict: 'E', 
    template: '<h3>Top Directive</h3><p><button ng-click="CallMe()">Click Me</button></p>', 
    controller: function($scope) { 
     var self = {}; 

     $scope.CallMe = function(){ 
     alert('Call Me'); 
     }; 
    }, 
    link: function($scope, $elem, $attrs, $ctrl) { 

    } 
    }; 
}]); 

контроллер, который необходим доступ

app.controller('subController', [ 
    '$scope', 
     function($scope){ 
     var self = {}; 

     $scope.CallDirective = function() { 
      alert('>>> Replace by call to directive function CallMe (somehow) <<<') 
     }; 
     }]); 

Вопрос

Что мне нужно сделать, чтобы заменить эту строку:

alert('>>> Replace by call to directive function CallMe (somehow) <<<') 

посредством фактического вызова функции CallMe() в директиве?

Если это невозможно напрямую, есть ли способ совместного использования функций, которые могут использоваться как директивой, так и контроллером? Моя первая мысль была бы службой, но в реальном сценарии нужно было бы манипулировать DOM, так что это не вариант.

Любые предложения?

Answer 1

в контроллере испускают это событие

app.controller('subController', [ 
    '$scope','$rootScope', 
     function($scope,$rootScope){ 
     var self = {}; 

     $scope.CallDirective = function() { 
      var data ='This is new data'; 
      $rootScope.$emit('callDirective',data); 
     }; 
     }]); 

и в директиве вы можете сделать это, как

app.directive('topDirective', ['$compile', function($scope){ 
    return { 
    scope: {}, 
    restrict: 'E', 
    template: '<h3>Top Directive</h3><p><button ng-click="CallMe()">Click Me</button></p>', 
    controller: function($scope,$rootScope) { 
     var self = {}; 

     $scope.CallMe = function(data){ 
     alert(data); 
     }; 
     $rootScope.$on('callDirective',function(type,data){ 
     $scope.CallMe(data); 
}); 
    }, 
    link: function($scope, $elem, $attrs, $ctrl) { 

    } 
    }; 
}]);