Я разработчик Java, работающий над побочным проектом. Я решил использовать AngularJS для использования моего веб-сервиса RESTful.AngularJS: динамическая настраиваемая директива с несколькими шаблонами
Мой JSON Структура заключается в следующем:
[
{
"generatorName": "name1",
"constructorParams": [
{
"type": "Boolean",
"value": "true",
},
{
"type": "Integer",
"value": "2",
}
]
},
{
"generatorName": "name2",
"constructorParams": [
{
"type": "Integer",
"value": "10",
},
{
"type": "Integer",
"value": "10",
}
]
}
]
Моя цель состоит в том, чтобы отобразить специфические (напр числа, текст и т.д.). Поле ввода, основанный на «типа» конструктора и парам инициализирует его с «значением». Таким образом, если был выбран первый генератор, я хотел бы иметь что-то вроде этого:
<html>
<select>
<option selected="selected" value="true">Yes</option>
<option value="false">No</option>
</select>
<input type="number" value="2">
<html>
Я прочитал некоторые темы, и решил использовать пользовательские директивы внутри моей петли:
<p ng-repeat="param in selectedGenerator.constructorParams">
<constructor-param param="{{param}}"></constructor-param>
</p>
Вот мой пользовательские директивы:
app.directive("constructorParam", function() {
return {
scope : {
param : '@'
},
templateUrl : '/html_templates/constructor_param_template.html'
};
});
А вот шаблон:
<div ng-switch="{{param.type}}">
<div ng-switch-when="Integer">
<input type="number" ng-attr-name="{{param.type}}" min="0" ng-attr-value="{{param.value}}">
</div>
<div ng-switch-when="Boolean">
<select ng-if="{{param.value}}" ng-attr-name="{{param.type}}">
<option selected="selected" value="true">Yes</option>
<option value="false">No</option>
</select>
<select ng-if="!{{param.value}}" ng-attr-name="{{param.type}}">
<option value="true">Yes</option>
<option selected="selected" value="false">No</option>
</select>
</div>
<div ng-switch-when="String">
<input type="text" ng-attr-name="{{param.type}}" ng-attr-value="{{param.value}}">
</div>
<div ng-switch-when="Double">
<input type="number" ng-attr-name="{{param.type}}" step="0.01" min="0" ng-attr-value="{{param.value}}">
</div>
</div>
Это не работает. Я вижу в инструментах разработчика Chrome, что эта директива запускается, но она не дает никакого видимого результата. Мои вопросы:
1) Правильно ли передаю объект param в пользовательском элементе директивы?
2) Я не уверен насчет scope директивы - я также попытался param : '=param' - это не работает либо ...
3) Как следует читать свойства пройденного объекта в шаблон? Я пробовал: value="{{param.type}}", value={{param.type}} и ng-attr-value="{{param.value}}". Ничего не работает, но может быть совершенно другая причина для этого ...
4) Могу ли я использовать префикс «ng-attr-» для всех атрибутов HTML такого элемента как имя и значение?
5) Код моего шаблона - это именно то, что я вставил - мне нужно сделать его допустимой структурой HTML с головой, телом и т. Д.? Должен ли я прилагать <script> с помощью AngularJS? Я сделал это, но еще раз, никаких изменений.
6) Сценарий использования всей истории состоит в том, чтобы выбрать конкретный генератор из раскрывающегося списка и отобразить его параметры конструктора указанным образом. Поэтому он должен восстанавливать HTML с изменением генератора. Я предполагаю, что это сделано в цикле ng-repeat, но, пожалуйста, подтвердите это.
Спасибо, очень за ваш вклад! :)