Пользовательская панель в UI-Expand Складная панель с помощью ng-transclude - PullRequest
Новая
       10

Пользовательская панель в UI-Expand Складная панель с помощью ng-transclude

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

Я пытаюсь внедрить пользовательскую панель развёртывания-свертывания в моём приложении angular 1.5.который будет принимать заголовок и тело как HTML.

Компонент- 

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

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

ui-collapsible-panel.html 

   <uib-accordion>
    <div uib-accordion-group is-open="true">
     <uib-accordion-heading>
      <div ng-transclude="uiCollapsiblePanelHeader"></div>
     </uib-accordion-heading>
    <div ng-transclude="uiCollapsiblePanelBody"></div>
    </div>
   </uib-accordion>

app.html 

     <uib-accordion close-others='oneAtATime' class='tawji-custom-accordian'>
     <div uib-accordion-group class='abcd' is-open='true'>
     <uib-accordion-heading>
  <ui-collapsible-panel-header><div class=' flex-container tawji-request-body'>
   <div class='h-inherit flex-container header-icon'>
     <img src='img/sprites/Study.svg#Requests-Brown-View'>
     <span clas='sub-title'>Request</span>
   </div>

   <div class='flex-container v-align-c justify-between overall-details'>

     <div class='flex-container v-align-c justify-between'>
       <img src='img/sprites/Study.svg#Approve-Green-View'>
       <div class='ui-control'>
         <label></label>
         <span class='value-label'>{{}}</span>
       </div>
     </div>
     <div class='flex-container v-align-c justify-between'>
       <img src='img/sprites/Study.svg#Reject-Red-View'>
       <div class='ui-control'>
         <label></label>
         <span class='value-label'>{{}}</span>
       </div>
     </div>
     <div class='flex-container v-align-c justify-between'>
       <img src='img/sprites/Study.svg#Inprogress-Brown-View'>
       <div class='ui-control'>
         <label></label>
         <span class='value-label'>{{}}</span>
       </div>
     </div>
   </div>
 </div></ui-collapsible-panel-header>
 <ui-colasible-panel-body></ui-colasible-panel-body>
  </uib-accordion-heading>
  </div>
  </uib-accordion>

Здесь явозможность поместить некоторое содержимое HTML в заголовок, но складной компонент кажется несколько сломан.Может кто-нибудь помочь мне определить, что я делаю не так

...