如何在 Angular 中管理手风琴式指令

Question

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

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

示例代码

<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 的两种方式。这样指令将能够修改其父指令的打开状态。

只需在 angular 文档中搜索指令和独立范围变量。

如何在 Angular 中管理手风琴式指令

How to manage an Accordion of Directives in Angular

accordion

angularjs

angular-ui

angularjs-directive