Javascript 如何在多表单web应用程序中重复使用同一指令？_Javascript_Angularjs_Forms_Validation

Javascript 如何在多表单web应用程序中重复使用同一指令？

javascript angularjs forms validation

Javascript 如何在多表单web应用程序中重复使用同一指令？,javascript,angularjs,forms,validation,Javascript,Angularjs,Forms,Validation,需要做哪些更改才能让下面的代码使用AngularJS从多个不同的表单成功调用相同的验证指令？注意，第一个表单能够正确验证，因为它检查偶数个打开的参数（和关闭参数）并在数字不相等时立即提醒用户但是，当我试图让第二个表单共享第一个指令时，第二个表单无法进行parens验证。当我创建一个具有不同名称的重复指令并从第二个表单调用该重复指令时，第二个表单的验证将在打开和关闭参数数量不等时禁用submit，但无法通知用户当相同的验证将用于站点中的许多表单时，使用冗余指令似乎很愚蠢这可能会（也可能不会）

需要做哪些更改才能让下面的代码使用AngularJS从多个不同的表单成功调用相同的验证指令？注意，第一个表单能够正确验证，因为它检查偶数个打开的参数

（

和关闭参数

）

并在数字不相等时立即提醒用户

但是，当我试图让第二个表单共享第一个指令时，第二个表单无法进行parens验证。当我创建一个具有不同名称的重复指令并从第二个表单调用该重复指令时，第二个表单的验证将在打开和关闭参数数量不等时禁用submit，但无法通知用户

当相同的验证将用于站点中的许多表单时，使用冗余指令似乎很愚蠢

这可能会（也可能不会）变得复杂，因为每个表单都位于不同的include中，该include在单页web应用程序中的同一index.html中交换。为了排除这种可能性，我将复制问题所需的所有代码包括如下：

index.html

是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iPlotmy</title>
<link rel="stylesheet" type="text/css" href="resources/css/my.css">
</head>
<body ng-app="myApp">

     <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="js/lib/angular.js"></script>
    <script src="js/lib/angular-resource.js"></script>
    <script src="js/lib/angular-ui-router.js"></script>
    <script src="js/lib/angular-ui-router-statehelper.js"></script>
    <script src="js/lib/angular-animate.js"></script>
    <script src="js/lib/angular-cookies.js"></script>
    <script src="js/lib/angular-storage.js"></script>
    <script type="text/javascript" src="myController.js"></script>

<div ng-controller="myController">  
<table width=100%>
<tr>
    <td colspan=3 align=center>
        <table>
            <tr>
                <th>
                    <button ng-click="firstLink()">first link</button>
                </th>
                <th>
                    <button ng-click="secondLink()">second link</button>
                </th>

        </table>
    </td>
</tr>
<tr>
    <td>
          <div ng-if="linktype == 'first'">
            <div ng-include="'index_firstinclude.html'"></div>
          </div>
          <div ng-if="linktype == 'second'">
            <div ng-include="'index_secondinclude.html'"></div>
          </div>
    </td>
</tr>
</table>
</div>

</body>
</html>

<table>
    <tr>
        <td width=200>
            <form name="userForm" ng-submit="firstForm(userForm.$valid)" novalidate>
                <input type="text" name="func1" ng-model="firstplot.func1" required data-countparens=""/>
            <p ng-show="userForm.func1.$error.required && !userForm.func1.$pristine" class="help-block">Function is a required field.</p>
            <p ng-show="userForm.func1.$error.countparens" class="help-block">The number of open parentheses ( does not equal the number of close parentheses ) !</p>
                <br>
                <button type="submit" ng-disabled="userForm.$invalid" >Click to Submit</button>
            </form>
        </td>
    </tr>
</table>

<table>
    <tr>
        <td width=200>
            <form name="mysecondForm" ng-submit="secondForm(mysecondForm.$valid)" novalidate>
                <input type="text" name="func1" ng-model="secondplot.func1" required data-countparens=""/>
                <p ng-show="mysecondForm.func1.$error.required && !mysecondForm.func1.$pristine" class="help-block">Function is a required field.</p>
                <p ng-show="mysecondForm.func1.$error.countparenssecond" class="help-block">The number of open parentheses ( does not equal the number of close parentheses ) !</p>
                <br>
                theta min: <input type="text" ng-model="secondplot.tmin"/>
                <br>
                theta max: <input type="text" ng-model="secondplot.tmax"/>
                <button type="submit" ng-disabled="mysecondForm.$invalid" >Click to Submit</button>
            </form>
        </td>
    </tr>
    </table>

索引_secondinclude.html

是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iPlotmy</title>
<link rel="stylesheet" type="text/css" href="resources/css/my.css">
</head>
<body ng-app="myApp">

     <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="js/lib/angular.js"></script>
    <script src="js/lib/angular-resource.js"></script>
    <script src="js/lib/angular-ui-router.js"></script>
    <script src="js/lib/angular-ui-router-statehelper.js"></script>
    <script src="js/lib/angular-animate.js"></script>
    <script src="js/lib/angular-cookies.js"></script>
    <script src="js/lib/angular-storage.js"></script>
    <script type="text/javascript" src="myController.js"></script>

<div ng-controller="myController">  
<table width=100%>
<tr>
    <td colspan=3 align=center>
        <table>
            <tr>
                <th>
                    <button ng-click="firstLink()">first link</button>
                </th>
                <th>
                    <button ng-click="secondLink()">second link</button>
                </th>

        </table>
    </td>
</tr>
<tr>
    <td>
          <div ng-if="linktype == 'first'">
            <div ng-include="'index_firstinclude.html'"></div>
          </div>
          <div ng-if="linktype == 'second'">
            <div ng-include="'index_secondinclude.html'"></div>
          </div>
    </td>
</tr>
</table>
</div>

</body>
</html>

<table>
    <tr>
        <td width=200>
            <form name="userForm" ng-submit="firstForm(userForm.$valid)" novalidate>
                <input type="text" name="func1" ng-model="firstplot.func1" required data-countparens=""/>
            <p ng-show="userForm.func1.$error.required && !userForm.func1.$pristine" class="help-block">Function is a required field.</p>
            <p ng-show="userForm.func1.$error.countparens" class="help-block">The number of open parentheses ( does not equal the number of close parentheses ) !</p>
                <br>
                <button type="submit" ng-disabled="userForm.$invalid" >Click to Submit</button>
            </form>
        </td>
    </tr>
</table>

<table>
    <tr>
        <td width=200>
            <form name="mysecondForm" ng-submit="secondForm(mysecondForm.$valid)" novalidate>
                <input type="text" name="func1" ng-model="secondplot.func1" required data-countparens=""/>
                <p ng-show="mysecondForm.func1.$error.required && !mysecondForm.func1.$pristine" class="help-block">Function is a required field.</p>
                <p ng-show="mysecondForm.func1.$error.countparenssecond" class="help-block">The number of open parentheses ( does not equal the number of close parentheses ) !</p>
                <br>
                theta min: <input type="text" ng-model="secondplot.tmin"/>
                <br>
                theta max: <input type="text" ng-model="secondplot.tmax"/>
                <button type="submit" ng-disabled="mysecondForm.$invalid" >Click to Submit</button>
            </form>
        </td>
    </tr>
    </table>

我怀疑这只是一个输入错误，你不需要第二条指令。只需将第二个表单从

ng show=“mysecondForm.func1.$error.countparenssecond”

更改为

ng show=“mysecondForm.func1.$error.countparens”

@user2341963谢谢。我做了更改，还注释掉了控制器中的

countparenssecond

指令。但是现在第二张表格仍然没有打印出关于不平等的警告。当paren数不相等时，它会将submit按钮清空。当字段为空时，它还显示所需的字段警告。但当parens数不相等时，它并没有给出不等parens方法。你还有其他建议吗？嗯，为我工作@user2341963那么为什么在这个链接上不起作用呢？在第二种形式中，不应使用

ng show=“mysecondForm.func1.$error.countparenssecond”

，而应使用

ng show=“mysecondForm.func1.$error.countparens”

。我猜你只是一个输入错误，你不需要第二条指令。只需将第二个表单从

ng show=“mysecondForm.func1.$error.countparenssecond”

更改为

ng show=“mysecondForm.func1.$error.countparens”

@user2341963谢谢。我做了更改，还注释掉了控制器中的

countparenssecond

ng show=“mysecondForm.func1.$error.countparenssecond”

，而应使用

ng show=“mysecondForm.func1.$error.countparens”

。看你的