Обращайтесь с различными вкладками формы как одна форма

Question

У меня есть форма, разделенная на разные вкладки. Они обрабатываются Ui-маршрутизатор:

$stateProvider.state('articledetail', { 
 
    url: '/articledetail/:article', 
 
    templateUrl: '/articledetail/articleDetail.html', 
 
    controller: 'articleDetailController', 
 
    controllerAs: 'vm' 
 
}) 
 
.state('articledetail.tab1', { 
 
    url: '/tab1', 
 
    templateUrl: '/articledetail/tab1.html' 
 
}) 
 
.state('articledetail.tab2', { 
 
    url: '/tab2', 
 
    templateUrl: '/articledetail/tab2.html' 
 
}) 
 
.state('articledetail.tab3', { 
 
    url: '/tab3', 
 
    templateUrl: '/articledetail/tab3.html' 
 
}) 
 
.state('articledetail.tab4', { 
 
    url: '/tab4', 
 
    templateUrl: '/articledetail/tab4.html' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form class="form-horizontal" name="editForm" novalidate> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" ng-class="{active: vm.$state.current.name == 'articledetail.tab1'}"><a ui-sref="articledetail.tab1" aria-controls="tab1" role="tab" data-toggle="tab">Algemene info</a></li> 
 
    <li role="presentation" ng-class="{active: vm.$state.current.name == 'articledetail.tab2'}"><a ui-sref="articledetail.tab2" aria-controls="tab2" role="tab" data-toggle="tab">Info 2</a></li> 
 
    <li role="presentation" ng-class="{active: vm.$state.current.name == 'articledetail.tab3'}"><a ui-sref="articledetail.tab3" aria-controls="tab3" role="tab" data-toggle="tab">Info 3</a></li> 
 
    <li role="presentation" ng-class="{active: vm.$state.current.name == 'articledetail.tab41'}"><a ui-sref="articledetail.tab4" aria-controls="tab4" role="tab" data-toggle="tab">Info 4</a></li> 
 
    </ul> 
 
    <div class="tab-content col-xs-7"> 
 
    <div ui-view></div> 
 
    <br /> 
 

 
    <div class="col-xs-7"> 
 
     <button class="btn btn-primary pull-right" ng-disabled="editForm.$invalid" ng-click="vm.test(editForm)">Artikelgegevens aanpassen</button> 
 
    </div> 
 
    </div> 
 
</form>

В моем методе контроллера после события щелчка, editForm содержит только поля вкладки, которые отображаются, а не поля из других вкладок. Однако я хотел бы иметь одну кнопку отправки, чтобы обрабатывать ВСЕ поля из разных вкладок.

Есть ли (простой) способ достичь этого?

EDIT: Это моя маршрутизация в настоящее время:

$stateProvider.state('articledetail', { 
     url: '/articledetail/:article', 
     templateUrl: '/articledetail/articleDetail.html', 
     controller: 'articleDetailController', 
     controllerAs: 'vm', 
     views: { 
      'tab1': { 
       templateUrl: '/articledetail/tab1.html' 
      }, 
      'tab2': { 
       templateUrl: '/articledetail/tab2.html' 
      }, 
      'tab3': { 
       templateUrl: '/articledetail/tab3.html' 
      }, 
      'tab4': { 
       templateUrl: '/articledetail/tab4.html' 
      } 
     } 
     }); 

Answer 1

хорошо, я думаю, что я могу видеть, что вы пытаетесь достичь. Но прежде чем я войду в него, взглянув на ваше первоначальное решение, вы должны рассмотреть возможность использования ui-sref-active="active" insead of ng-class.

В любом случае, текущая проблема. Вы хотите иметь модель, разделяемую между несколькими видами, но одну кнопку отправки, которая обрабатывает все это. Если вы хотите использовать представления, вы должны использовать сервис для хранения вашей модели. В противном случае, используя первую настройку состояния, вы можете совместно использовать контроллер для родительского состояния с дочерними состояниями.

Я установил код для просмотра.

http://codepen.io/r3plica/pen/OVgRmV