Есть кнопка, при нажатии на нее в тег как в родительский добавляется некий html блок. Этот блок выводится с помощью моей директивы:
<ol id="optionsList" class="inputs">
<answer-field option="1"/>
</ol>
Вот сама директива:
.directive('answerField', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var id = attrs["option"];
},
templateUrl: 'template.html'
}
})
И шаблон
<li>
<input class="testVariant" type="text" name="option**N**" required/>
</li>
Так вот при нажатии кнопки ng-click в контролере, я добавляю в конец
<ol>
элементы <li>
с шаблона с помощью директивы и компилирую(шаблон сложнее чем в примере и с другими директивами).
Проблема: как сделать чтобы шаблоны генерировались с передаваемыми им переменными, например чтобы вместо N подставляло значение option из <answer-field option="N"/>
Пока решил вопрос используя только template вместо templateURL:
.directive('answerField', function () {
return {
restrict: 'E',
template: function (elm, attrs) {
return '<li><input class="testVariant" type="text" ' +
'name="option' + attrs["option"] + '" id="option' + attrs["option"] + '" size="80" required/>' +
'<div ng-click="alert()" class="ckeImg">CKE</div><div class="answerCheck" inline-block">' +
'<div id="answersList" class="answersCheckbox"><div><input type="checkbox" ' +
'name="answer' + attrs["option"] + '" value=' + attrs["option"] + '></div></div></div></li>'
},
}
})
Но это не красиво и наверно не правильно. Или как в шаблоне считать каким по индексу является экземпляр шаблона в родительском контейнере(списку)