Question

我已经在我的应用程序中实现了手风琴。但close-other =“ true”似乎无效。

我实现了在应用程序中使用可折叠组件的通用组件-

组件-

  var uiCollapsiblePanel = {
       transclude: {
       header: 'uiCollapsiblePanelHeader',
        body: 'uiCollapsiblePanelBody'
        },
       bindings: {
       isBlockExpanded: '<',
       triggerCollapse: '&'
       },
      templateUrl: './ui-collapsible-panel.html',
      controller: 'uiCollapsiblePanelController',
     controllerAs: 'ucpc'
      };

    angular
    .module('common')
      .component('uiCollapsiblePanel', uiCollapsiblePanel);

ui-collapsible-panel.html-

 <div class=" ui-collapsible-panel">
  <uib-accordion close-others="true">
  <div uib-accordion-group  is-open="$ctrl.isBlockExpanded">
   <uib-accordion-heading>
    <div ng-transclude="header">
    </div>
   </uib-accordion-heading>
   <div ng-transclude="body"></div>
  </div>
</uib-accordion>
</div>

调用ui-coolapsible-component-

      <div class="app-custom-accordian">
       <ui-collapsible-panel is-block-expanded='false'>
        <ui-collapsible-panel-header>
           <request-header all-requests-data="mrtt.allRequestsData"> 
      </request-header>
      </ui-collapsible-panel-header>
       <ui-collapsible-panel-body>
        <request-body all-requests-data="mrtt.allRequestsData" class="request-body-container"></request-body>
    </ui-collapsible-panel-body>
  </ui-collapsible-panel>
</div>
<div class="app-custom-accordian">
  calling-ui-collapsible-component
</div>
   <div class="app-custom-accordian">
  calling-ui-collapsible-component
</div>
  <div class="app-custom-accordian">
  calling-ui-collapsible-component
 </div>

有人可以帮助我找出问题所在吗？

Answer 1

在此示例中，您实现了单个手风琴。如果您有多个uib-accordion-group，则此功能将起作用。一个打开会导致另一个关闭。

按文档（https://angular-ui.github.io/bootstrap/）：close-others $ C（默认值：true）-控制是否扩展项目会导致其他项目关闭。”

希望，会有所帮助。

如果不是这种情况，我建议用更多详细信息扩展示例

（已编辑）

据我所知，您正在尝试制作通用的可重用手风琴。为此，您创建了“ ui-collapsible-panel.html”。

根包装'uib-accordion'需要多个uib-accordion-group。在此示例中，您将在一组内进行转写。

<div uib-accordion-group  is-open="$ctrl.isBlockExpanded">
  <uib-accordion-heading>
    <div ng-transclude="header"></div>
  </uib-accordion-heading>
  <div ng-transclude="body"></div>
</div>

这意味着您将无法使用“近亲”。为此，您需要执行ng-repeat或直接将uib-accordion-group排除。基本上，这种多次转换（对于标题和正文）是没有用的，因为所有这些数据都必须在同一父“ uib手风琴”中。直接超越的示例：

<ui-collapsible-panel>
  // preload some data (for example groups)
  <div uib-accordion-group is-open="$ctrl.isBlockExpanded" ng-repeat="group in $ctrl.groups">
     <uib-accordion-heading>
     // and use group data to for request-header and request-body
       <request-header all-requests-data="mrtt.allRequestsData"></request>
     <uib-accordion-heading>
     <request-body all-requests-data="mrtt.allRequestsData" class="request-body-container"></request-body>
  </div>
</ui-collapsible-panel>

参考https://angular-ui.github.io/bootstrap/（原始uib-bootstrap插件示例）

当内容被包含时，close-others“ true”在ui手风琴中不起作用

1 个答案: