angularjs – 在父指令中附加子指令

我有一个父指令,我想在链接函数中动态添加子指令.子指令^需要parentDirective.
我可以添加任何html元素,但一旦我尝试$编译我的孩子指令,我得到以下错误,它找不到所需的控制器.如果我手动添加子指令,它完美地工作.

错误：

Error: [$compile:ctreq] Controller 'myInput',required by directive 'myKey',can't be found!

添加元素后,我的模板应该是这样的：

<myInput>
 <myKey></myKey> <-- added dynamically
 <myKey></myKey> <-- added dynamically
 <myKey></myKey> <-- added dynamically
  ....
</myInput>

myInput指令：

angular.module('myModule').directive('myInput',['$log','$templateCache','$compile',function($log,$templateCache,$compile) {
  return {
    restrict: 'E',transclude: true,scope: {
      service: '=',// expects a stimulus object provided by the tatoolStimulusService
      onkeydown: '&'           // method called on key press
    },controller: ['$scope',function($scope) {
      this.addKey = function(keyCode,value) {
        $scope.service.addInputKey(keyCode,{ givenResponse: value });
      };
    }],link: function (scope,element,attr) {

      // add keys directives
      angular.forEach(scope.service.registeredKeyInputs,function(value,key) {
        var keyEl = angular.element(
          $compile('<myKey code="'+ key +'" response="'+ value.response +'"></myKey >')($rootScope));
        element.children(":first").append(keyEl);
      });

    },template: '<div ng-transclude></div>'
  };
}]);

myKey指令：

angular.module('myModule').directive('myKey','$sce',$sce) {
  return {
    restrict: 'E',scope: {},require: '^myInput',attr,myCtrl) {
      myCtrl.addKey(attr.code,attr.response);

      // ...
    },template: '<div class="key"><span ng-bind-html="key"></span></div>'
  };
}]);

var keyEl = angular.element('<myKey code="'+ key +'" response="'+ value.response +'"></myKey>');
element.append(keyEl);
$compile(keyEl)(scope);

<my-input>
    <my-key></my-key>
</my-input>

angular.element('<my-key code="'+ key +'" response="'+ value.response +'"></my-key >');