close-other "true" не работает в пользовательском интерфейсе, когда контент transclude - PullRequest
Новая
       26

close-other "true" не работает в пользовательском интерфейсе, когда контент transclude

0 голосов
/ 30 октября 2018

Я реализовал аккордеон в своем приложении. но close-other = "true", кажется, не работает.

Я реализовал общий компонент для использования в своем приложении разборного компонента-

Component- 

  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>

Может кто-нибудь помочь мне определить, в чем проблема?

1 Ответ

0 голосов
/ 30 октября 2018

В этом примере вы реализовали один аккордеон. Эта функция будет работать, если у вас есть несколько групп 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 или transclude непосредственно uib-accordion-group. По сути, это многократное включение (для заголовка и тела) бесполезно, потому что все эти данные должны быть в одном и том же родительском «uib-accordion». Пример прямого преобразования: 

<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)

...