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

Question

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:

The popover .directive is what has been modified the most:

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

The tooltip .provider was only changed here, in an effort to get two-way binding to work on the title field :

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.

For the secondary problem, I think the videos on isolate scope here may help you: egghead.io Full disclosure not spam but I worked with this guy previously, he's more social through video than in person but from what I've seen of his work is very intelligent. — shaunhusain
– shaunhusain, Commented Jul 11, 2013 at 18:29
Second problem - nested object for however deep your input form is. title:{value:{inputValue:''}};. Something like that - as for the first problem, that's a lot of code to debug. :( — rGil
– rGil, Commented Jul 11, 2013 at 19:32
@shaunhusain I have watched his videos, and they were very helpful to get me started, but none of the examples (unless I missed one) delved quite as deep into the nested/compiled directives. — grailian
– grailian, Commented Jul 11, 2013 at 19:40
@rGil I know it is a lot of code (I tried to trim as much as possible). But I was hoping one of the angular-ui guys might catch this, since it is just a minor tweak to their work. — grailian
– grailian, Commented Jul 11, 2013 at 19:48
Sure. It's a cool component you've added. When you get it going I'm sure many others will use it. — rGil
– rGil, Commented Jul 11, 2013 at 19:53

maxisam · Accepted Answer · 2013-07-11 21:56:30Z

21

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.

edited Jul 11, 2013 at 21:56

answered Jul 11, 2013 at 20:21

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

grailian Over a year ago

Thank for you this! For the secondary problem, you can see in index.html this line: <div iantooltip="Hi" iantooltip-title="item.title"> that I'm trying to data-bind to the object item.title instead of passing the value {{item.title}} (i.e. the isolate-scope '=' vs '@'). But my varying attempts to add something along the lines of scope: {title: '='} in the provider have not worked.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related