feat(popover): support template url for partial

[mjp0]

As requested in #202 by @joshdmiller here's my request for external partial support for popover which would make popover much more versatile and lower the need of duplicate code in the apps. Already working implementation can be found in one of the "competing" Bootstrap implementations at http://mgcrea.github.com/angular-strap/#/popover.

[joshdmiller]

I'm thinking just <a popover popover-template="{{templateUrl}}">Open Me</a> would work well.

The issue we'll need to solve for, however, is getting the scope right. The tooltip and popover use child directives with isolate scopes, so we may have to do some transclusion magic to get this to work as expected. Thoughts?

---

FWIW - AngularStrap isn't really a "competing implementation" as it's not an "implementation" at all - it just wraps the original jQuery. We can't really translate what they do back here; we really have to re-engineer the original Bootstrap plugins to be in line with the "Angular Way".

[mjp0]

I have to confess that I'm not familiar enough to give you any advice on scope. My directives so far has been so basic that I haven't had to deal with them, or transclusion. But I think that transclusion might be problematic if you need A LOT of popovers for different elements. I'm not worried that much about desktop but tablets worry me when it comes to doing a lot of binding etc.

[jhiemer]

Hi,
I took a look into the last commits. The tooltip has the option of loading external content now. In the demo files I could not find any reference to that for popover. Does this work at well?

[joshdmiller]

@jhiemer The tooltip now supports putting HTML into the tooltip text to be unsafely included into the template. The popover doesn't. However, this issue is for external templating or partial support for the popover. i.e.:

<a tooltip-html-unsafe="<strong>Hello!</strong">Hover!</a>

versus

<button popover-template="'partial.tpl.html'">Click me!</button>

It doesn't make any sense, I don't think, to do partials for tooltips, but we can do HTML content in the popover with a fairly simple code change.

[jhiemer]

@joshdmiller I think doing partials for tooltips is not necessary as well. Perhaps there might be some usecases, but the main usage scenarios will cover just plain text. For the popover instead I see many different usage scenarios. For example I got a date picker, which could be put into the popover as well as a color picker.

Which changes would be necessary?

[jhiemer]

@joshdmiller any update on this?

[joshdmiller]

@jhiemer Sorry - I remember responding to this days ago... insanity can be inconvenient.

To implement an independent template, we need to decide on a few things:

Syntax

I think something like this:

<button popover popover-template="'partial.tpl.html'">Click me!</button>

Template

The popover default is this:

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
      <div class="popover-content" ng-bind="content"></div>
  </div>
</div>

Should we just, in essence, transclude the contents into the popover-inner element? Or is that too generic? We could also do it in popover-content to keep the default popover design from Twitter.

Scope

In which scope is the template compiled? A new sibling of the directive makes sense to me.

[jhiemer]

@joshdmiller thanks for getting back at this. Essentially I think the provided code could be what I am looking for. I created two examples of small directives which I would like to put into a popover and which you can see here: http://plnkr.co/PQOWFO and here: http://plnkr.co/99HHNd.

Both cases would need to access the parent scope. This issue #315, is reaching for something similar I guess.

[jhiemer]

@joshdmiller do you have a working version of your changes where I might take a look at?

[ffesseler]

any news on this one ?

[jhiemer]

+1

[joshdmiller]

I just opened a PR for the custom triggers and it changes the $tooltip service somewhat significantly so I won't push this until that PR goes through. But for those curious, here's a rough implementation: http://plnkr.co/edit/RTpGfZG0cl069nkqmm14?p=preview