使用 ui-views 和 angularjs ui 选项卡和无效输入答案

【问题标题】：Using ui-views and angularjs ui Tabs and invalid input使用 ui-views 和 angularjs ui 选项卡和无效输入
【发布时间】：2015-05-13 13:26:22
【问题描述】：

我最近在一些表单中切换了标记以使用 angularJS ui Tabs 组件。标记如下所示：

<div class="col-lg-3 col-md-3 panel-container">
                        <tabset vertical="true" type="pills">
                            <tab heading="@Labels.general" select="selectView('general')"  >

                            </tab>

                            <tab heading="@Labels.passes" select="selectView('guestPasses')">

                            </tab>

                            <tab heading="@Labels.history" select="selectView('guestActivity')">

                            </tab>
                            
                            <tab heading="@Labels.userDefined 1"
                                 select="selectView('userDefined1')" >
                            </tab>                     
                            
                            <tab heading="@Labels.userDefined 2"
                                 select="selectView('userDefined2')" >
                            </tab>
                        </tabset>
                    </div>

                    <div class="col-lg-9 col-md-9 panel-container">
                        <div data-ui-view data-autoscroll="false"></div>
                        <div data-ui-view="guestPasses" data-autoscroll="false"></div>
                    </div>

控制器选择视图的代码如下：

$scope.selectView = function (viewName) {
                if ($scope.isNew) {
                    $state.go('new.' + viewName);
                }
                else {
                    $state.go('edit.' + viewName);
                }
            };

除了与原始实现相比的这种行为变化之外，一切似乎都运行良好 - 如果我在其中一个控件中进行了无效输入，则切换到另一个选项卡，然后返回，那个错误的输入就消失了。有效输入被保留。我想知道是否可以以这种方式保留无效输入？

【问题讨论】：

查看 allowInvalid 选项 - ng-model-options="{allowInvalid=true}"。 docs.angularjs.org/api/ng/directive/ngModelOptions
显然这是 1.4 版本的新增功能我们使用的是 1.3.13 版本。上次我检查 1.4 处于测试阶段。我可能需要重新检查，你知道它有多稳定吗？再次感谢。
我认为它是在 1.3 中添加的，它在 1.3.13 中列为可用：code.angularjs.org/1.3.13/docs/api/ng/directive/ngModelOptions 您必须将此属性添加到您想要允许无效值的任何字段（任何您有ng 模型）。
我已经尝试过解析器的错误。由于某种原因它不喜欢它。
我可以添加以上内容作为答案。还有一个 SO question 有一个可以在全球范围内应用的选项，它可能更适合您。 stackoverflow.com/questions/21345987/…

标签： javascript html angularjs uiview angular-ui

【解决方案1】：

我还想分享我的解决方案，以防它对某人有所帮助。在我的控制器中，我定义了以下范围变量对象数组：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    $scope.tabsViews = [{
                index: 1, name: 'general',
                invalid: false, title: resourceFactory.getResource('Labels', 'general')
            },
            {
                index: 2, name: 'guestPasses', invalid: false,
                title: resourceFactory.getResource('Labels', 'passes')
            },
            {
                index: 3, name: 'guestActivity', invalid: false,
                title: resourceFactory.getResource('Labels', 'history')
            },
            {
                index: 4, name: 'userDefined1', invalid: false,
                title: resourceFactory.getResource('Labels', 'userDefined') + ' 1'
            },
            {
                index: 5, name: 'userDefined2', invalid: false,
                title: resourceFactory.getResource('Labels', 'userDefined') + ' 2'
            }];

还有这个选择视图的方法：

$scope.selectView = function (viewIndex) {
                
                var newView = objectFindByKey($scope.tabsViews, 'index', viewIndex);

                if ($scope.previousIndex != null) {
                    $scope.tabsViews[$scope.previousIndex-1]["invalid"] = $scope.form.$invalid;
                }                
                
                $scope.previousIndex = viewIndex; 
                if (newView) {
                 
                    var viewName = newView["name"];
                    if ($scope.isNew) {
                        $state.go('new.' + viewName);
                    }
                    else {
                        $state.go('edit.' + viewName);
                    }
                }
            };

然后我在我的 HTML 中添加了以下标记：

<div class="col-lg-3 col-md-3 panel-container">
                        <tabset vertical="true" type="pills">
                            <tab ng-repeat="tab in tabsViews" select="selectView(tab.index)"
                                 class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}">
                                <tab-heading>{{tab.title}}</tab-heading>

                            </tab>
                        </tabset>
                    </div>

                    <div class="col-lg-9 col-md-9 panel-container">
                        <div data-ui-view data-autoscroll="false"></div>
                        <div data-ui-view="guestPasses" data-autoscroll="false"></div>
                    </div>

最后这就是我在 site.css 中的类：

.widget .invalid-tab * {
    background-color: #F9EAF3;
    /*color: #F9EAF3;*/
    color: #d43f3a;
}

    .widget .invalid-tab:hover * {
        background-color: #E06B6C;
        color: #ffffff;
    }

    .valid-tab {
        border-top: none;
    }

就是这样 - 一切都很好。我的无效标签得到了想要的行为。

【讨论】：

【解决方案2】：

每个选项卡都是带有 ui-bootstrap 的单独 ui-view，默认情况下无效值不会应用于模型...因此当您导航到另一个状态/选项卡时更改会丢失。您可以使用以下内容覆盖 ng-model-options 的行为

<input type="text" ng-model="model.value" ng-model-options="{allowInvalid:true}" ng-pattern="...">

还有一个类似的先前问题提供了一些在全球范围内执行此操作的选项：How can I override Angular's filtering of invalid form values, forcing Angular to persist the $viewValue to $modelValue?

【讨论】：