CODEWITHSUNDEEP
angularjsangularjs-directiveangular-ui-bootstrap
grailian
grailian

Reputation: 720

Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding

I am using angular-ui-bootstrap in my current project, and I have a requirement for a popover that will allow the user to take some action on a given element (rename/edit/delete/etc...). Since angular-ui's bootstrap popover doesn't allow for custom html or data-binding by default, I have copied their tooltip/popover .provider and .directive in an effort to customize it to my needs.

Main Problem: The ng-click bindings are being lost after the popup is closed and re-opened.

Secondary Problem: Can two-way data-binding be setup so that I don't have to manually set scope.$parent.$parent.item?

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


To give glance of what changes were made to the original tooltip.js: 

.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();
        };
      }
    };
  })

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>';

I appreciate any help, I feel the compiled directives and providers seem to be large mental hurdles when getting started with Angular. I've been trying figure out and manipulate this directive so I can learn from it, just as much as actually needing the component itself.

Upvotes: 12

Views: 27212

Answers (1)

maxisam
maxisam

Reputation: 22735

Here is the working plunker

The problem is from the original tooltip. It removes the tooltip after you close but next time when you open it, it doesn't compile the tooltip again. (link function for the tooltip trigger only run in the first time.)

My approach is don't remove the tooltip, just control it by display attribute from CSS.

I also make a pull request to discuss this issue.

I just update the plunker.

The 2nd one is actually just make it link with the parent scope. However, it will create a child scope with my approach. I think you can use watch to do it as well.

Upvotes: 21

Related Questions