$ 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ディレクティブを持ってparentディレクティブ$compileのson。指令）

息子は、私がrequire: "^^grandParent"場合には息子で、私はそれが動作します（* ^代わりに^^の使用）require: "^grandParent"を書く場合

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

しかしを、というエラーを与えます。我々は結果のHTMLを見れば

、それは次のようになります。もちろん

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

、壮大な親は厳密に息子の祖先です。だからなぜエラー？

Answer 1

grandParent - > controllerAs： 'grandParent'を追加します。

son - > replace replace： '^^ 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 :-)：