Javascript ng在一页中包含相同的部分页两次

我有一个部分html文件，比如test.html，我希望它包含在主页中，比如main.html两次。我正在我的部分文件中的文本框上执行ng模式。它不适用于我的主页。请找到下面的例子并帮助我

test.html（部分）

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>

button ng show只对一个div起作用，而不是对两个div都起作用，如果我使用$parent作为部分表单名称，那么这两个div也起作用

---

请帮助我找到我缺少的内容。

问题是您引用了同一个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>

test.html
main.html

或者，您可以创建两个带有表单的视图，并相应地包含它们

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>