Why Can Not The Controller Of The Required Directive Be Found In Angularjs?

I wrote two directives in angularjs, one is embedded in the other one. below is the scripts for the directives: module.directive('foo', [ '$log', function($log) { return {

Solution 1:

AFAIK, you cannot have a controller in the child directive.

Demo: http://plnkr.co/edit/kv9udk4eB5B2y8SBLGQd?p=preview

app.directive('foo', [
   '$log', function($log) {
     return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: '<div id="test" ng-transclude></div>',
      controller: function($scope) {
        $scope.panes = ['Item1','Item2','Item3'] 
        return { 
          getPanes: function() { return$scope.panes; }
        };
      },
      link: function(scope, element, attrs, ctrl) {
        $log.log('test1', ctrl, ctrl.getPanes(), scope.panes);  
      }
    };
  }
]);

I removed the child controller.

app.directive('bar', [
  '$log', function($log) {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      require: '^?foo',
      template: '<div ng-transclude></div>',
      link: function(scope, element, attrs, ctrl) {
        scope.x = 1;
        $log.log('test2', ctrl, ctrl.getPanes(), scope.panes, scope.x);
      }
    };
  }
]);