Использование UI-Router для разделения частей большой формы ввода данных
У меня есть большая форма ввода данных, которая определяется программно.
Я моделирую это с помощью PlanController. При запуске PlanController загружает план, его разделы и поля. Шаблон PlanController показывает:
- информация заголовка плана
навигационная панель, загруженная из разделов плана, например:
li.nav-item(ng-repeat="section in plan.sections | filter:{'active': '1'}" ui-sref-active="active") a.nav-link(ui-sref="plan.section({idSection: section.idSectionDef})" ) {{sexion.title}}
Это все работает отлично.
Примечание. Так как я не знаю, какие разделы есть заранее, или каковы поля в них, я решил использовать дочерний маршрут ui-router для отображения информации информационного раздела.
Это где я сталкиваюсь с проблемами
Вся информация о плане загружается в родительский контроллер. Я не уверен, как связать дочернюю информацию в дочернем представлении с родителем с родителем.
Первая попытка - нет дочернего контроллера
Я попытался объявить дочернее состояние (раздел) без контроллера и попытаться получить доступ к информации раздела непосредственно из PlanController:
.state('plan.section', {
url: '/section/{idSection}',
templateUrl: 'app/plan/planSection.html'
})
но при связывании полей раздела в шаблоне дочернего состояния planSection.html:
div.col-md-4.col-sm-12
ilp-field(ng-repeat="fld in getFields($stateParams.idSection)| filter:{ layoutColumn: 10, idSectionDef: $stateParams.idSection}" datafield="fld" )
div.col-md-8.col-sm-12
ilp-field(ng-repeat="fld in getFields($stateParams.idSection) | filter:{ layoutColumn: 20}" datafield="fld" onchangecallback="checkilp")
Я получаю поля для первого раздела ($ scope.getFields берет идентификатор раздела и возвращает список полей, принадлежащих этому разделу).
Когда я выбираю один из других дочерних разделов, URL показывает изменение состояний, но поля не меняются.
Вторая попытка - дочерний контроллер
Первоначально я попытался объявить дочернее состояние с его собственным контроллером:
.state('plan.section', {
url: '/section/{idSection}',
templateUrl: 'app/plan/planSection.html',
controller: 'planSectionController'
})
но я не знаю, как получить список полей из родительского в дочерний элемент управления, и когда я пытаюсь привязать к:
$state.$current.parent
как в
ilp-field(ng-repeat="fld in $state.$current.parent.getFields($stateParams.idSection)| filter:{ layoutColumn: 10, idSectionDef: $stateParams.idSection}" datafield="fld" )
Я получаю сообщение об ошибке, что $ state. $ Current.parent не доступен.