javascript - 无法找到条件模板 - Controller 'mdRadioGroup'，指令 'mdRadioButton' 需要

Question

我正在尝试构建允许我在调查中显示问题的自定义指令。因为我有多种类型的问题，所以我考虑过创建单个指令并根据问题类型更改它的模板。

我的指令:

directive('question', function($compile) {
  var combo = '<div>COMBO - {{content.text}}</div>';
  var radio = [
    '<div>RADIO - {{content.text}}<br/>',
    '<md-radio-group layout="row" ng-model="content.answer">',
    '<md-radio-button ng-repeat="a in content.answers track by $index" ng-value="a.text" class="md-primary">{{a.text}}</md-radio-button>',
    '</md-radio-group>',
    '</div>'
  ].join('');
  var input = [
    '<div>INPUT - {{content.text}}<br/>',
    '<md-input-container>',
    '<input type="text" ng-model="content.answer" aria-label="{{content.text}}" required md-maxlength="10">',
    '</md-input-container>',
    '</div>'
  ].join('');

  var getTemplate = function(contentType) {
    var template = '';

    switch (contentType) {
      case 'combo':
        template = combo;
        break;
      case 'radio':
        template = radio;
        break;
      case 'input':
        template = input;
        break;
    }

    return template;
  }

  var linker = function(scope, element, attrs) {

    scope.$watch('content', function() {
      element.html(getTemplate(scope.content.type))
      $compile(element.contents())(scope);

    });
  }

  return {
    //require: ['^^?mdRadioGroup','^^?mdRadioButton'],
    restrict: "E",
    link: linker,
    scope: {
      content: '='
    }
  };
})

在我的主 Controller 中，我有问题列表，在单击按钮后，我正在设置分配给我的指令的当前问题。

第一个问题一切正常，但在我将当前问题设置为 radio 类型后，出现此错误:

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

我已经尝试将 required 添加到我的指令中，但它没有帮助。

require: ['^mdRadioGroup'],

我不知道发生了什么，因为我对 Angular 还是个新手。

我创建了 Plunker 来显示我的问题:http://plnkr.co/edit/t0HJY51Mxg3wvvWrBQgv?p=preview

重现此错误的步骤:

1. 打开插件
2. 点击 Next 按钮两次(导航至问题 3)
3. 在控制台中查看错误

编辑:
我已经编辑了我的 Plunker，所以我的问题模型是可见的。我能够选择答案，即使是在抛出错误的问题中——问题模型正在更新。 但是我在做第3题的时候还是报错

Answer 1

我只是简单地扩展一个基本指令，然后也有一个具有不同指令名称的专用指令。

// <div b></div>
ui.directive('a', ... )
myApp.directive('b', function(aDirective){
   return angular.extend({}, aDirective[0], { templateUrl: 'newTemplate.html' });
});

代码取自 https://github.com/angular/angular.js/wiki/Understanding-Directives#specialized-the-directive-configuration