Szablon warunkowy - kontroler "mdRadioGroup", wymagany przez dyrektywę "mdRadioButton", nie można znaleźć

Question

Próbuję stworzyć niestandardową dyrektywę, która pozwoli mi wyświetlać pytania w ankiecie. Ponieważ mam wiele typów pytań, pomyślałem o stworzeniu pojedynczej dyrektywy i zmianie jej szablonu na podstawie typu pytania.

mój dyrektywy:

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

Wewnątrz mojego głównego kontrolera Mam listę pytań i po kliknięciu przycisku mam ustawienie aktualnego pytanie, który jest przypisany do mojego dyrektywy.

Wszystko działa dobrze dla pierwszych pytań, ale po tym, jak ustawić aktualną pytanie typu urządzenia radiowego otrzymuję ten błąd:

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

próbowałam dodanie required do mojego dyrektywy jak poniżej, ale to nie pomogło .

require: ['^mdRadioGroup'], 

Nie mogę zrozumieć, co się dzieje, ponieważ wciąż jestem nowy w kanciastości.

Utworzyłem Plunker pokazać mój problem: http://plnkr.co/edit/t0HJY51Mxg3wvvWrBQgv?p=preview

kroki, aby odtworzyć ten błąd:

1. Otwórz Plunker
2. Kliknij Next przycisk dwa razy, aby przejść do (pytanie 3)
3. Zobacz błąd w konsoli

EDYCJA:
Edytowałem mój Plunker, więc mój model pytań jest widoczny. Jestem w stanie wybrać odpowiedzi, nawet w przypadku pytań, które powodują aktualizację modelu pytań o błąd. Ale nadal dostaję błąd podczas zadawania pytania 3.

Answer 1

Po prostu po prostu rozszerzę dyrektywę bazową, a następnie będę miał wyspecjalizowane te o różnych nazwach dyrektyw.

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

Kod wzięty z https://github.com/angular/angular.js/wiki/Understanding-Directives#specialized-the-directive-configuration

Answer 2

grałem trochę z kodem i okaże się, że powodem, dla którego wystąpił błąd dlatego 3rd pytanie ma więcej odpowiedzi niż 2, więc podczas tworzenia mdRadioGroup po raz pierwszy definiuje 4-indeksu odpowiedzi, a później na pytanie 3 wychodzi poza związaną z 6 odpowiedziami ... Więc nie eleganckim rozwiązaniem jest utworzenie tyle $ index jako max odpowiedzi na każde pytanie, po raz pierwszy, pokaż tylko te z tekstem ...

.directive('question', function($compile) { 
var combo = '<div>COMBO - {{content.text}}</div>'; 
var radio = [ 
'<div>RADIO - {{content.text}}<br/>', 
'<md-radio-group layout="row">', 
'<md-radio-button ng-repeat="a in content.answers track by $index" ng-show={{a.text!=""}} 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="color" 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; 
} 

następnie zmienić zapytanie mieć Maxa ilość odpowiedzi za każdym razem, we wszystkich pytań:

$scope.questions = [{ 
type: 'radio', 
text: 'Question 1', 
answers: [{ 
    text: '1A' 
}, { 
    text: '1B' 
}, { 
    text: '1C' 
}, { 
    text: '' 
}, { 
    text: '' 
}, { 
    text: '' 
}, { 
    text: '' 
}] 
}, { 
type: 'input', 
text: 'Question 2', 
answers: [{ 
    text: '2A' 
}, { 
    text: '2B' 
}, { 
    text: '2C' 
}, { 
    text: '' 
}, { 
    text: '' 
}, { 
    text: '' 
}, { 
    text: '' 
}] 
}, { 
type: 'radio', 
text: 'Question 3', 
answers: [{ 
    text: '3A' 
}, { 
    text: '3B' 
}, { 
    text: '3C' 
}, { 
    text: '3D' 
}, { 
    text: '' 
}, { 
    text: '' 
}, { 
    text: '' 
}] 
}, { 
type: 'combo', 
text: 'Question 4', 
answers: [{ 
    text: '4A' 
}, { 
    text: '4B' 
}, { 
    text: '' 
}, { 
    text: '' 
}, { 
    text: '' 
}, { 
    text: '' 
}, { 
    text: '' 
}] 
}]; 

Reszta kodu jest taka sama. Jak już mówiłem, brak elegancji i na pewno są lepsze opcje, ale może być rozwiązaniem na razie ...

Answer 3

Working Demo

Nie ma potrzeby, aby tworzyć i stosować dyrektywę do Państwa wymagań.

Możesz po prostu użyć szablonów kątowych i ng-include pod warunkiem.

można po prostu stworzyć trzy szablony (każdy dla kombi, radio i wejście) na swojej stronie jak ta,

<script type="text/ng-template" id="combo"> 
    <div>COMBO - {{content.text}}</div> 
</script> 

i obejmują te szablony w div za pomocą ng-include.

<!-- Include question template based on the question --> 
<div ng-include="getQuestionTemplate(question)"> 

Tutaj getQuestionTemplate() zwróci identyfikator szablonu, które powinny być uwzględnione w tym div.

// return id of the template to be included on the html 
$scope.getQuestionTemplate = function(content){ 
    if(content.type == "combo"){ 
     return 'combo'; 
    } 
    else if (content.type == "radio"){ 
     return 'radio'; 
    } 
    else{ 
     return 'input'; 
    } 
} 

To wszystko. Jesteś skończony.

Proszę, zadaj mi jakąkolwiek wątpliwość.