Как добавить атрибуты к дочернему элементу в директиве
У меня есть следующий plunkr:
http://plnkr.co/edit/M1uwZxZP7sXp5sPw7pxf?p=preview
Я хочу сделать следующее: я хотел бы создать угловой код для автоматической генерации входных данных внутри формы, учитывая json с его описанием EXAMPLE:
{'name': 'username', 'description': ['text', 'maxlength=16', 'required']}
Для этого я использую пользовательскую директиву, которая добавляет ввод к тегу
<custominput></custominput>
Повороты
<custominput>
<input type='text'/>
</custominput>
и ТО я добавляю любые другие атрибуты проверки, такие как minlength и maxlength.
В моем plunkr я могу добавить атрибуты к тегу custominput, например:
<custominput compiled="compiled" disabled="disabled"></custominput>
Но КАК я могу добавить эти атрибуты во входной тег (что означает дочерний элемент custominput)??
ОБНОВЛЕНИЕ 1
Этот вопрос можно обобщить так:
Как я могу добавить элемент / атрибуты HTML с угловыми директивами ОТ директивы
ПРИМЕР: включите это
<form name="form0">
<input custom-directive>
</form>
в это:
<form name="form0">
<input custom-directive type="text" ng-model="ctrl.username" ng-maxlength="15" ng-required="required">
</form>
из директивы
1 ответ
Вы бы добавили их в раздел шаблона директивы. Смотрите код ниже:
HTML-код
<form>
<input custom-directive>
</form>
код директивы (я просто пишу это с головы до головы, вероятно, это не будет работа по копированию и вставке, но она определенно идет в правильном направлении).
app.directive('customDirective', function() {
return {
restrict: 'A',
controller: function($scope, attrService) {
$scope.attributes = attrService.getAttrs;
},
link: function(scope, element, attrs) {
element.attr('name', scope.attributes.name);
// add more attributes
console.log(scope.attributes) // ensure attributes is being pushed through from directive controller.
}
}
});
Для динамического добавления атрибутов