Angular -UI-Bootstrap пользовательская подсказка /popover с двусторонней привязкой данных

Я использую angular -ui-bootstrap в своем текущем проекте, и у меня есть требование для popover, которое позволит пользователю предпринять некоторые действия данный элемент (переименование/редактирование/удаление/etc...). Поскольку angular -ui bootstrap popover не позволяет настраивать html или привязку данных по умолчанию, я скопировал их tooltip/popover .provider и .directive, чтобы настроить его на мои нужды.

Основная проблема: привязки ng-click теряются после закрытия и повторного открытия всплывающего окна.

Дополнительная проблема. Можно ли настроить двустороннюю привязку данных, чтобы мне не пришлось вручную устанавливать scope.$parent.$parent.item?

Plunker: http://plnkr.co/edit/HP7lZt?p=preview


Чтобы посмотреть, какие изменения были внесены в оригинальный tooltip.js:

  • Popover .directive - это то, что было изменено больше всего:
.directive('iantooltipPopup', function () {
    return {
      restrict: 'E',
      replace: true,
      scope: { mediaid: '@', title: '=', content: '@', placement: '@', animation: '&', isOpen: '&' },
      templateUrl: 'popover.html',
      link: function (scope, element, attrs) {
        scope.showForm = false;

        scope.onRenameClick = function () {
          console.log('onRenameClick()');
          scope.showForm = true;
        };

        scope.onDoneClick = function () {
          console.log('Title was changed to: ' + scope.title);
          scope.showForm = false;
          scope.$parent.$parent.item.title = scope.title;
          scope.$parent.hide();
        };
      }
    };
  })
  • Всплывающая подсказка .provider была изменена здесь, чтобы получить двустороннюю привязку для работы в поле title:
var template = 
  '<'+ directiveName +'-popup '+
    // removed
    // 'title="'+startSym+'tt_title'+endSym+'" '+
    'title="tt_title" ' +
    'content="'+startSym+'tt_content'+endSym+'" '+
    'placement="'+startSym+'tt_placement'+endSym+'" '+
    'animation="tt_animation()" '+
    'is-open="tt_isOpen"'+
    '>'+
  '</'+ directiveName +'-popup>';

Я ценю любую помощь, я считаю, что скомпилированные директивы и провайдеры, похоже, являются большими умственными препятствиями, когда начинаются с Angular. Я пытаюсь выяснить и управлять этой директивой, чтобы я мог учиться у нее, так же, как и сам компонент.

Ответы

Ответ 1

Вот рабочий plunker

Проблема заключается в исходной подсказке. Он удаляет всплывающую подсказку после закрытия, но в следующий раз, когда вы ее открываете, она снова не скомпилирует всплывающую подсказку. (функция ссылки для триггера всплывающей подсказки запускается только в первый раз.)

Мой подход не удаляет всплывающую подсказку, просто управляйте им атрибутом display из CSS.

Я также делаю запрос для обсуждения этой проблемы.

Я просто обновляю плункер.

Второй - это просто привязать его к родительской области. Тем не менее, он создаст дочернюю область с моим подходом. Я думаю, вы также можете использовать часы, чтобы сделать это.