Защо изскачащият прозорец на UI Bootstrap не се показва в моята клетка на UI Grid

Имам просто AngularJS решение, което изобразява таблица с помощта на Angular UI Grid. Всеки път, когато показвам атрибут, който е масив от стойности, искам да покажа първия елемент в масива и да покажа изскачащ прозорец, когато потребителят кликне върху клетката. Използвах UI Bootstrap, за да изобразя изскачащия прозорец.

Софтуерът за показване на този шаблон беше сглобен по следния начин (вижте този файл за повече подробности) :

  • Конфигурацията на мрежата на потребителския интерфейс (искам изскачащият прозорец да се показва за записите в колоната с роли):

    $scope.gridOptionsPopoverTemplate = {
   columnDefs: [
     { name: 'name',    width:128},
     { name: 'balance', width:128},
     { name: 'city',    width:128},
     { name: 'roles',   width:128, field: 'roles', cellTemplate: 'iq_cellTemplate_2.html', cellClass: 'cellPopover'}
   ]
};

  • Дефиницията на cellTemplate, iq_cellTemplate_2.html, както следва:

    <div popover-template="iq_popoverTemplate.html" 
    popover-title='Title'
    popover-trigger="click" 
    popover-placement="right" 
    popover-append-to-body="true">{{grid.getCellValue(row, col)[0]}}
</div>

  • Шаблонът за изобразяване на ролите в изскачащия прозорец, както следва:

    <div ng-repeat="role in grid.getCellValue(row, col)">
   <p>role</p>
</div>

За съжаление не работи, като наблюдаваното поведение е, че изскачащото изображение не се изобразява без други видими симптоми. Ще забележите също, че plunker има две секции, като другата секция демонстрира, че popover се показва, когато вместо директивата popover-template се използва директивата popover.

Една допълнителна бележка, успях да изобразя изскачащия прозорец с помощта на изскачащия прозорец на Bootstrap, както е показано в този плункер. Почти работи, тъй като в случаите, когато изскачащият прозорец се зачервява над прозореца за изглед на UI Grid (наслагване: превъртане;) частта, която заличава, е скрита.

Popover може да се покаже, ако се добави към елемент извън обхвата на прозореца за изглед на UI Grid, което се прави от UI Bootstrap при използване на директивата popover, но не успява при използване на директивата popover-template.

Преди да напиша допълнителен персонализиран код, за да се справя с това, реших да попитам дали някой има някакви мисли или предложения. Благодаря предварително за всяка ваша помощ.


angularjs popover angular-ui-bootstrap angular-ui-grid
person Rodrigo Silveira    schedule 25.07.2015    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Този отговор има две части:

  • UI Bootstrap все още не го поддържа; вижте коментарите за изходния код:

    /**
 * The following features are still outstanding: popup delay, animation as a
 * function, placement as a function, inside, support for more triggers than
 * just mouse enter/leave, html popovers, and selector delegatation.

  • Изскачащият прозорец на Bootstrap поддържа необходимото поведение. Реших го, като прикрепих поповите към тялото

    var popover = $(element).popover({
  trigger: 'hover',
  html: true,
  container: 'body',
  content: template,
  title: scope.title,
  placement: 'right'
});
person Rodrigo Silveira    schedule 26.07.2015