Question

我正在以角度构建一个大型输入表单。为了使应用程序用户友好，我已将表单分解为许多不同的部分。我需要将每个部分都放在手风琴的不同组中。每个部分都需要进行验证，并且在满足所需的字段验证之前，用户无法继续进行验证。

在应用程序的主页面中，我添加了手风琴的标记。手风琴中的每个部分都是一个自定义指令。该指令包含每个组的标记（输入表单和验证），它还包含连接到相关服务以在db中保持状态的代码。

示例代码

<uib-accordion close-others="true">
    <uib-accordion-group heading="Person Details" is-open="heading1.isOpen">
        <div person-details></div>
        <button class="btn btn-default btn-sm pull-right" ng-click="heading2.isOpen = !heading2.isOpen">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
    </uib-accordion-group>
    <uib-accordion-group heading="Address Details" is-open="heading2.isOpen">
        <div address-details></div>
        <button class="btn btn-default btn-sm pull-right">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
    </uib-accordion-group>
</uib-accordion>

困难在于如何管理手风琴组随时开放的内容。在上面的示例代码中，我有一个下一个按钮来打开下一个手风琴组。但是，此按钮需要与指令本身一起存在才能管理验证。这样的问题是，指令然后需要知道如何控制手风琴以改变活动的手风琴组 - 以某种方式冒泡。

有人对此有任何想法吗？如果你认为我这样做是错误的，请告诉我。

由于

Answer 1

例如，您需要在指令中使用范围变量，该变量具有与heading1.isOpen的双向绑定。这样，该指令就能够修改其父指令的is-open状态。

只需搜索指令和隔离范围变量的角度文档。

如何管理Angular中的指令手风琴

1 个答案: