radio-button: Controller 'mdRadioGroup', required by directive 'mdRadioButton', can't be found #7275
Description
I'm trying to build custom directive that uses Angular Material directive inside.
My idea is to have main directive that will have conditional template. In that template I'd like to use my custom directives that have Angular Material Directives inside.
I've managed to create prototype of desired functionality, but I get error:
Controller 'mdRadioGroup', required by directive 'mdRadioButton', can't be found
Here is my directive:
.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: '='
}
};
})
I've created this Plunker to show my issue. Just click Next button two times and see error in console.
I've asked this question on StackOverflow but I didn't get any responses that would helped me with resolving that issue so I thought this might be a bug or (probably) I have error in my code.
If I remove md-radio-group and md-button everything works fine.