$ компилировать transcludeControllers не работает "^^ grandParentCtrl"

Question

У меня есть установки, как это:

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('MyCtrl', function() {}); 
 

 
myApp.directive("grandParent", function() { 
 
\t return { 
 
\t \t template: [ 
 
\t \t \t '<div style="border: 1px solid">', 
 
\t \t \t \t '<p>transcluded view is below:</p>', 
 
\t \t \t \t '<ng-transclude></ng-transclude>', 
 
\t \t \t '</div>' 
 
\t \t ].join(""), 
 
\t \t transclude: true, 
 
\t \t controller: function() { 
 
\t \t \t this.getMe = "grandParentCtrl.controller.getMe"; 
 
\t \t } 
 
\t }; 
 
}); 
 

 
myApp.directive('parent', function($compile) { 
 
\t return { 
 
\t \t require: "^^grandParent", 
 
\t \t link: function($scope, $element, $attrs, grandParentCtrl) { 
 
\t \t \t $element.append($compile('<son></son>')($scope, undefined, { 
 
\t \t \t \t transcludeControllers: { 
 
\t \t \t \t \t grandParent: { 
 
\t \t \t \t \t \t instance: grandParentCtrl 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t })); 
 
\t \t } 
 
\t } 
 
}); 
 

 
myApp.directive('son', function($compile) { 
 
    return { 
 
    require: '^^grandParent', 
 
\t \t template: [ 
 
\t \t \t '<div class="btn btn-danger">', 
 
\t \t \t \t 'abc: <i>{{abc}}</i>', 
 
\t \t \t '</div>' 
 
\t \t ].join(""), 
 
\t \t link: function(scope, element, attrs, ctrl) { 
 
\t \t \t scope.abc = ctrl.getMe; 
 
\t \t } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl as vm"> 
 
    <grand-parent> 
 
\t \t <parent></parent> 
 
    </grand-parent> 
 
</div>

(grand-parent директива parent директива The parent директиву $compile ы son. директива)

В директиве сын, если я require: "^^grandParent" это дает ошибку говоря

"grandParent" directive required by "son" directive cannot be found 

НО, если в сына я пишу require: "^grandParent" (* ^, используя вместо ^^) он работает.

Если мы посмотрим на полученный HTML, это выглядит следующим образом:

<grand-parent> 
    <parent> 
    <son> 
    </son> 
    </parent> 
</grand-parent> 

Очевидно, гранд-родитель строго предок сына. Так почему же ошибка?

Answer 1

grandParent -> Добавить контроллерА: 'grandParent'.

son -> replace require: '^^ grandParent' с '^ grandParent'.

---

JS:

 var myApp = angular.module('myApp', []); 

     myApp.controller('MyCtrl', function() {}); 

     myApp.directive("grandParent", function() { 
      return { 
       template: [ 
        '<div style="border: 1px solid">', 
         '<p>transcluded view is below:</p>', 
         '<ng-transclude></ng-transclude>', 
        '</div>' 
       ].join(""), 
       transclude: true, 
       controller: function() { 
        this.getMe = "grandParentCtrl.controller.getMe"; 
       }, 
      controllerAs: 'grandParent' 
      }; 
     }); 

     myApp.directive('parent', function($compile) { 
      return { 
       require: "^^grandParent", 
      link: function($scope, $element, $attrs, grandParentCtrl) { 
       $element.append($compile('<son></son>')($scope, undefined, { 
         transcludeControllers: { 
          grandParent: { 
           instance: grandParentCtrl 
          } 
         } 
        })); 
      } 
      } 
     }); 

     myApp.directive('son', function($compile) { 
      return { 
      require: '^grandParent', 
       template: [ 
        '<div class="btn btn-danger">', 
         'abc: <i>{{abc}}</i>', 
        '</div>' 
       ].join(""), 
      link: function(scope, element, attrs, ctrl) { 
        scope.abc = ctrl.getMe; 
       } 
      }; 
     }); 

Wanna know how I did it - check the updated fiddle :-):