Question

我已经坚持了一段时间，我希望有人可以提供帮助。

我有四种不同的控制器和模板。一个控制器有一个标题，一个提交按钮和3个标签。为了这个问题的目的，我将其称为父控制器，该父控制器的模块是personManagement

parent.html中的tabset如下所示：

<div>
   <h3> Main page title </h3>
   <div>
    <tabset>
       <tab role="tab" heading="General Info" ui-sref="tab1"></tab>
       <tab role="tab" heading="Detailed Info" ui-sref="tab1"></tab>
       <tab role="tab" heading="Related Info" ui-sref="tab1"></tab>
    </tabset>
    <div ui-view></div>
</div

每个控制器都使用$stateprovider

我可以正确加载每个html标签，并使用$state.go或ui-sref在每个标签控制器中手动切换标签。但是，每个选项卡中都包含表单数据，其中一些字段是必填字段，我需要能够验证在父html中启用“提交”按钮之前，所有字段都填充在三个不同的选项卡中。

在每个选项卡的html中，我在每个必填字段输入框中使用ng-init，并在控制器中为该选项卡调用函数checkAllRequiredFields，该选项卡检查是否填写了所有必填字段。但是，它只会检查当前选项卡中的那些。

我尝试将checkAllRequiredFields函数移动到父控制器，然后使用像这样的工厂

angular.module('myApp.personManagement').factory('RequiredFieldsFactory', function () {
    return { AllRequiredFields: [], checkAllRequiredFields: '' };
}); //this code is in the parent controller. The definition for the `checkAllRequiredFields` function is also declared in the parent controller..

每次修改输入框时，都会调用父控制器中的函数，但它始终只知道当前选项卡的必填字段。我很确定这是因为其他选项卡是隐藏的，直到您导航到这些选项卡，因此DOM只包含当前选项卡中的数据。

有没有解决方法，所以我可以验证所有3个标签中的所有必填字段是否已填满，以便启用“提交”按钮？

即使不活动，如何从angular ui tabset加载所有选项卡中的内容

0 个答案: