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

ng-include same partial page twice in a page

本文关键字：分页 一页 包含两 ng      更新时间：2023-09-26

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

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作为部分表单名称。

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

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

或者，您可以只创建两个具有窗体的视图，并相应地将它们包括在内。

相关文章：