我有一个分布在多个选项卡上的表单.最初,我使用ui-bootstrap的tabset指令,但是后来需要深入链接到一个特定的选项卡,所以我以为我会使用ui-router的嵌套视图.
我所遇到的问题是,父表单仅在所有子表单有效时才有效,但使用ui-router状态时,一次只会加载一个子表单.
的index.html
<!DOCTYPE html> <html ng-app="app"> <head> <script src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <script src="script.js"></script> </head> <body class="container-fluid"> <div ui-view> <ul class="list-unstyled"> <li><a ui-sref="edit.basic">Basic</a></li> <li><a ui-sref="edit.extended">Extended</a></li> </ul> </div> </body> </html>
的script.js
angular.module('app',['ui.router']). config(function($stateProvider) { $stateProvider.state('edit',{ abstract: true,url: '/edit/',templateUrl: 'edit.html',controller: function($scope) { $scope.model = {}; } }). state('edit.basic',{ url: '/basic',templateUrl: 'basic.html' }). state('edit.extended',{ url: '/extended',templateUrl: 'extended.html' }); });
edit.html
<div class="row" ng-form="editForm"> <div class="col-xs-12"> <ul class="nav nav-tabs"> <li ui-sref-active="active"> <a ui-sref="edit.basic">Basic</a> </li> <li ui-sref-active="active"> <a ui-sref="edit.extended">Extended</a> </li> </ul> </div> <div class="col-xs-12" ui-view></div> <div class="col-xs-12"> <button type="button" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button> </div> <div class="col-xs-12"> <hr> <tt>model = {{model}}</tt><br> <tt>editForm.$valid = {{editForm.$valid}}</tt><br> <tt>editForm.basicForm.$valid = {{editForm.basicForm.$valid}}</tt><br> <tt>editForm.extendedForm.$valid = {{editForm.extendedForm.$valid}}</tt> </div> </div>
basic.html
<div ng-form="basicForm"> <div class="form-group"> <label for="textProperty">Text Property</label> <input type="text" class="form-control" name="textProperty" id="textProperty" ng-model="model.textProperty" required> </div> </div>
extended.html
<div ng-form="extendedForm"> <div class="form-group"> <label for="numericProperty">Numeric Property</label> <input type="number" class="form-control" name="numericProperty" id="numericProperty" ng-model="model.numericProperty" required> </div> <div class="form-group"> <label for="dateProperty">Date Property</label> <input type="date" class="form-control" name="dateProperty" id="dateProperty" ng-model="model.dateProperty" required> </div> </div>
我开始相信这种做法不适合我的目的.而不是使用嵌套视图,我应该继续使用该选项卡并使用一个状态参数来激活相应的选项卡.
我有兴趣知道别人如何解决它.
更新1:
更新2:
更新3: