javascript - ng-在页面中包含相同的部分页面两次

Question

我有一个部分 html 文件，例如 test.html，我希望它包含在主页(例如 main.html)中两次。我正在部分文件中的文本框上执行 ng-pattern 。它没有应用到我的主页。请找到下面的示例并帮助我。

test.html(部分)

<form name="testform">
    <div>
        <input name="firstname" ng-pattern="/^[a-zA-Z0-9]+$/">
    </div>          
</form> 

main.html

<div>
    <div>
        <ng-include src="'test.html'"></ng-include>
        <button type="button" ng-show="testform.firstname.$error.pattern==false">
    </div>
    <div>
        <ng-include src="'test.html'"></ng-include>
        <button type="button" ng-show="testform.firstname.$error.pattern==false">
    </div>
</div>

按钮 ng-show 仅适用于一个 div，而不适用于两个 div，如果我使用 $parent 作为部分表单名称，那也是如此。

请帮我找到我缺少的东西。

Answer 1

问题是您引用了相同的 DOM 对象。通过指定名称并验证它，您可以调用两次相同的形式和相同的属性名称。 Angular 只做了一次，就认为它已经完成了它的工作。我认为它无意这样做，因为您可以创建两种形式。通过添加额外的类或至少更改表单名称并将 ng-include 与表单名称包装在一起，您可以解决此问题:

test.html
    <div>
        <input name="firstname" ng-pattern="/^[a-zA-Z0-9]+$/">
    </div>     

main.html
<div>
    <div>
        <form name="testform1">
            <ng-include src="'test.html'"></ng-include>
        </form>
        <button type="button" ng-show="testform1.firstname.$error.pattern==false">
    </div>
    <div>
        <form name="testform2">
            <ng-include src="'test.html'"></ng-include>
        </form>
        <button type="button" ng-show="testform2.firstname.$error.pattern==false">
    </div>
</div>

或者，您可以使用表单创建两个 View 并相应地包含它们。