Contidional模板 - 指令'mdRadioButton'所需的控制器'mdRadioGroup'无法找到

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: '='
    }
  };
})

在我的主控制器内部,我有问题列表,点击按钮后,我正在设置分配给我的指令的当前问题.

对于第一个问题,一切正常,但在我将当前问题设置为无线电类型后,我收到此错误:

错误:[$ compile:ctreq]无法找到指令'mdRadioButton'所需的控制器'mdRadioGroup'!

我已经尝试添加required到我的指令如下,但它没有帮助.

require: ['^mdRadioGroup'],

我无法弄清楚最近发生了什么,因为我还是刚开始有角度的.

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

重现此错误的步骤:

1. 打开Plunker
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