12

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.

grailian
  • 720
  • 1
  • 8
  • 9
  • For the secondary problem, I think the videos on isolate scope here may help you: http://www.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 Jul 11 '13 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 Jul 11 '13 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 Jul 11 '13 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 Jul 11 '13 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 Jul 11 '13 at 19:53

1 Answers1

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.

maxisam
  • 21,975
  • 9
  • 75
  • 84
  • Thank for you this! For the secondary problem, you can see in index.html this line: `
    ` 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.
     – grailian Jul 11 '13 at 21:08