Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

feat(popover): support template url for partial #220

Closed
zero- opened this Issue · 323 comments
@zero-

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
Owner

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".

@zero-

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
Owner

@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
Owner

@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
Owner

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

@jhiemer

@joshdmiller took a look at it. When I create a real template file, the contents still renders as mypopover.tpl.html so it does not seem to get loaded. Could that be right?

@joshdmiller
Owner

Damn! There seems to a bug in Plunker - I lost a ton of work! I opened a bug report - filearts/plunker#39.

Anyway, here it is re-created: http://plnkr.co/edit/JgeUP0anaU4BmsS5cJNh?p=preview. Can you give it another go?

@pkozlowski-opensource

@joshdmiller this doesn't seem to work for me, I'm getting "Error: selectors not implemented"...

@joshdmiller
Owner

I'm not surprised it doesn't work - there are files missing! Now I'm very frustrated. Plunker's not keeping my most recent changes. This has happened twice now on this same issue - and I re-created it from scratch!

I re-created the changes once again, but it still won't save the changes I'm making even though it tells me it does. I'll just submit a PR later and we can go from there...

@pkozlowski-opensource

Yeh, this happened to me couple of times as well... Now I'm using plunker for rather simple experiments only...

@jhiemer

Great, waiting for it @joshdmiller. After you submitted it I will review it asap.

@joshdmiller
Owner

Has anyone had a change to look at #369?

@jhiemer

Hi,
taking a detailed look at it today!

@jhiemer

@joshdmiller ok took a first look. When using the inline templates it works as expected. When I try to include templates from 'partials/entity/test.html' I get a large digest(); error.

Is this not allowed to load external urls? I think loading external stuff would be great, as I would enable us to put the datepicker directive of @bekos into the popover.

@joshdmiller
Owner

@jhiemer Can you post a Plunker? It works for me: http://plnkr.co/edit/Mmq5dPi6MIYeEMoCrYSB?p=preview

@jhiemer

@joshdmiller indeed you are right. I found the bug. It was an error on my side. Need to do some scope testing now, but I feel comfortable with the solution by now.

@jhiemer

Good, did some further test. Exactly what I was looking for...will try the datepicker now.

@madhums

+1

@aasif

+1

@graphicsxp

Does the popover template work now ? None of the above plunkr work for me.

@JensRantil

Does the popover template work now ? None of the above plunkr work for me.

I think the only pull request for this (that I've found) is #369, and it is yet to be merged. So no, it doesn't work yet.

@gunta

++1

@sunild

If anyone is interested, I've forked this project and and merged pull request #369 from @joshdmiller here. Or you can just clone Josh's repo, and pull down his branch named issue220 from about a month ago. The difference being my fork includes all of the changes that occurred in the last month. It works quite well, thanks to all involved!

@joshdmiller
Owner

Just an update: the reason this hasn't been merged is threefold: (1) it's missing tests, though that's not much of an issue; (2) there is a memory leak because the second scope is not destroyed, which is also trivial to fix; and (3) there is a wicked, pernicious little bug that causes scope methods to evaluate only the first time (see the Plunker in PR #369). I am not sure what's causing the bug and haven't had time to dive into it in great detail.

@seanhess

+1 Thanks for the update. ETA on fixing those issues?

@mattymess

Would love to see this feature!

@jhiemer

@joshdmiller and @pkozlowski-opensource I created a demo with Datepicker and Popover which can be found here:

http://plnkr.co/edit/WtiLvfCsTR4sr0140ke0?p=preview

There two issues I have:

  • The scoping feels really hacky.
  • When the popup was closed and reopened, I am not able to select a date anymore.
@johnobe

@jhiemer I encountered the same issue you did with the binding not working after the popover had been closed and reopened.

I was able to workaround this by hiding the tooltip using CSS instead of removing it from the DOM. I'm not sure why removing it from the DOM is an issue, I may investigate it more later.

I forked your Plunker, updated lines 1867 and 1869 where I changed tooltip.remove() to tooltip.css('display', 'none'). After that, the binding will work after opening and closing the popover.

You can see the Punker at http://plnkr.co/edit/d73cqVAsRMiAjHh6lkXw?p=preview

@jhiemer

@johnobe great fix, thanks! Did you get managed to close the popover after date selection?

@johnobe

@jhiemer I haven't tried that in your Plunker example yet. What I did in the app I am working on is I declared a custom trigger on the popover (see PR #553). Once the trigger was created, I created a directive that would use this trigger to close the popover.

@dotcom9

Looks like some interesting work is going on here. I need a tooltip that is capable of showing a partial that has been compiled against the current scope. Is any of this going to happen?

@rwwagner90

Is the popover-html-unsafe directive going to be in the normal angular-ui or should I get a version that you guys have been working on with it included?

@joshuapurcell

@jhiemer Thanks for your changes and working example. It is exactly the type of solution I was looking for when I found this issue. I've imported the files used in the plunker (http://plnkr.co/edit/d73cqVAsRMiAjHh6lkXw) to get the functionality.

Looking forward to when this issue is resolved, as manually pulling in libraries breaks my automated build process.

@ajoslin
Owner

@pkozlowski-opensource isn't this added in master?

@pkozlowski-opensource

@ajoslin nope, sadly. There was WIP but I don't think it is finished. So not ready to be merged IMO.

@ismail-codar

Thanks for your works. I looked at address http://plnkr.co/edit/d73cqVAsRMiAjHh6lkXw?p=preview . My suggestion is only tt-load-template-in-sibling directive is not required.

tt-load-template-in-sibling="{{template}}"
same effect as
ng-include="template"

Another little change: ng-model="$parent.$parent.entity.endDate" to ng-model="$parent.$parent.$parent.entity.endDate"

Plunker Link: http://plnkr.co/edit/02nnwt?p=preview

@madmed88

instead of writing the html in the attribute it will be nice to just reference an existing item in the DOM via its id. jquery mobile does this.

@c0bra

+1

@scamden

+1 could really use this functionality

@thvd

+1, looks like there is demand for this feature!

@sathify

+1

@sym3tri

+1

@jloper3

I was able to achieve the requested feature using $dialog, and styling it as a popover.
Grab $event from ngclick and use it to position the dialog/popover.

@hallister
Owner

@jloper3 I was thinking about doing something similar with new $modal service. I haven't really had time to play with it but it makes me curious if this isn't just the right way to handle absolutely positioned elements.

@pkozlowski-opensource, before I bother with this does it seem like overkill to go this route? I'm mixed on whether a popover really needs its own service instance, but it seems like wrapping the service in a directive would allow significantly more control over popover behavior. Thoughts?

@jloper3

@hall5714 I feel you. Feels pretty cruddy, and its a pain managing scope. Just trying to get things done.
Unfortunately I'm not at the level where I feel I could rewrite this as a directive without throwing my current project timeline off track.
I question though, if you were to implement this, when would you ever use $dialog or $modal? A popover as a directive would trump both of those in usability and code cleanliness IMO.

@hallister
Owner

@jloper3 Well that gets us into a bit of UI theory rather than use-cases and slightly derails this issue, but I'll give you a basic rundown on my personal ideas:

A tooltip is intended for a minor attention-getter. It should be non-interactive and only display minimal information. My most recent use-case was to show where the save button is when activity on an application stops for X amount of time if the user had never saved anything. A popover is intended for an interactive attention getter that you can choose to ignore. For example the editable directive I wrote will eventually have a popover option for quick changes to small amounts of data.

A modal is an interactive feature that requires the user intervene. If a modal appears, I MUST do something (either take action in the modal or cancel it) in order to continue what I was doing. An ordering system with line items, and each item requires filling out a form would be a good example of where a modal comes into play. I can't save the form while I'm actively adding an item, so the modal prevents that by disallowing me from doing just that without saving or canceling the add.

This isn't to say this is the right way of doing things, it's simply my personal theory and should be taken with a grain of salt. That said, even if popover was implemented via the $modal service, it certainly wouldn't have the degree of control that $modal has, because you simply aren't going to be doing a huge multi-part form in a popover. Well... you probably shouldn't anyway :smile:.

@jloper3

@hall5714 I agree to some extent. I get the delineation of non interactive tool tips, but a use case doesn't necessarily have to map to a code base. A single code base can satisfy multiple use cases. In this case, interactive pop ups. Whether that's a modal or a popover is just another name.
Same here with the salt...

@Xeroday

+1

@Yappli
  • Comment edited * : Sorry, I misunderstood the intent of @jperl.
@pkozlowski-opensource

wow, $5, how generous :-)

@jperl

@Yappli It's more of a gesture, like buying a beer.

@Yappli

@jperl : Sorry, I edited my comment. I thought your message was spam.
I understood the concept now (A short explanation in the pic could help I think).

Thanks @jperl to try to solve this issue.

@dmackerman

Did this make it in anywhere? Would be fantastic to just specify a popover-template="url.html".

@jbruni

I also wanted HTML in my popovers. I've accomplished it by overriding the popover template:

<scrlpt id="template/popover/popover.html" type="text/ng-template">
  <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-include src="content"></ng-include></div>
    </div>
  </div>
</script>

The only change from the original template is at the popover-content line.
(side note: I'm writing "scrlpt" tag instead of "script" because GitHub was not highlighting the syntax properly, handling HTML as JavaScript)

How do I use it? I define the popover message HTML as a template:

<scrlpt id="message.html" type="text/ng-template">
  <p>Here comes the <b>HTML</b> popover contents!!!</p>
</script>

And pass the template name as the popover attribute:

<button popover="message.html" class="btn">Example</button>

This works for me. Of course, it is overriding the popover attribute meaning (the "content" is interpreted as "templateUrl")... I'm sharing it anyway, may be useful to others, who can keep tweaking it further.

(Note: you don't need to define your popover template like above. Just think that popover attribute now works exactly as a templateUrl.)

Thanks.

@dmackerman

@jbruni thanks, this works. Is there a way to make bindings still work? Example being I'm trying to bind an input using ng-model, and it doesn't look like the bindings are working. I imagine this is because ng-include is creating a child scope.

Will keep investigating.

@jloper3
@jbruni

@dmackerman Indeed, my sharing is only of a very quick and simple workaround to allow "static" HTML inside the popover, without the need of modifying angular-ui-bootstrap code - just using as it is right now.

Bindings would be a whole new chapter...

@jbruni

@dmackerman and guys, I've managed to make it happen... here it is:
https://gist.github.com/jbruni/6629714

This was done without changing AngularJS UI Bootstrap code, and without overriding its templates. It just works, as an extension.

BUT the workaround to "inject" the original scope into the tooltip is terrible. As far as I can see, the only way to make a cleaner code would be by changing AngularJS UI Bootstrap code. Someone could transform this in a PR, making what is necessary to avoid this "trick" to "inject" the scope.

@pkozlowski-opensource... any advice to transform this Gist into a PR? Specifically: a way to pass the "popoverTemplate" directive scope into the "popoverTemplatePopup" directive? Maybe adding a fourth parameter to the "$tooltip" function so it can make the scope available to the "popup" directive?

Also... the template is almost identical to the original popover one... this code duplication may be unnecessary...

I've looked at PR #369, but I have not tested it. But I see something related to "sibling" there... I am using the popover appended to the body... how could something based on "sibling" work in this case? As I've said, I have not tested, I can't tell, but it seems to me that a "sibling" approach would fail for an "appended to body" popover...

Nevermind. Thanks!

@jbruni

@codebountycharlie - Am I eligible to the dollars? :-)

@graphicsxp

sorry if this been asked before but I remember asking for the popover template feature months ago. Where is this going ? Is there already a 'beta' version I could use ? If so, where's the code ? Thanks !

@jbruni

@graphicsxp I've posted a working solution yesterday. Code is at pull request #1046. The corresponding patch is here: https://gist.github.com/jbruni/6633055. It improves and resolves the issues of pull request #369 - proposed previously. I am waiting for feedback. I think the code is good to merge. Feel free to use it.

@graphicsxp

@jbruni thanks . I've downloaded the patch and I've run the command git apply --check popover-template.patch but it gives me 'fatal: corrupt patch at line 91'. I've never tried to apply a patch before so maybe I'm doing something dumb. I'm in the clone folder so in theory it should work... Do you think there is indeed a problem with the patch ?

@jbruni

@graphicsxp Please, just add an empty line at the end of the file and try again.

You can also get it from my fork... (use git remote add, then fetch, and checkout the "popover-template" branch... instead of "remote add" you can also clone it directly)

@graphicsxp

@jbruni Ok, I've managed to get the code and compile it. But how do you actually use it ?

I've tried that:

<button popover-placement="top" popover="On the Top!" content="'app/common/views/templates/gridHeaderString.html'" class="btn">Top</button>

But the content is not loaded. Could you provide the code for calling the directive ?

@ThCC

+1
Any progress with this feature? @joshdmiller @pkozlowski-opensource
@jbruni I did not understand your talk with @graphicsxp by any chance your solution now supports templates with bindings?

@jbruni

@graphicsxp I haven't been around these days; sorry. Use popover-template to specify the template. Do not use the popover attribute in the same element! Like this:

<button popover-placement="top" popover-template="app/common/views/templates/gridHeaderString.html" class="btn">Top</button>
@jbruni

@ThCC Yes - template with bindings. I've just followed @joshdmiller steps and went further ahead, resolving the remaining issues... problem with ng-model binding, memory leak, etc - all issues resolved.

AFAIK, it only needs the review of someone from inside who also knows the internals...

The patch is really minimal and "unobstrusive" - it does not disturb existing functionality.

It would be extremely easy to review, if it didn't resolve the binding issue (actually, a "hidden" bug, which has been uncovered and fixed). It seems it requires "expert review" - but the experts are extremely busy and unavailable for this task right now... we must wait.

Meanwhile, the code is there. Just:

  1. add the template/popover/popover-template.html file available here;
  2. substitute src/popover/popover.js by this one in my fork here (15 lines added);
  3. substitute src/tooltip/tooltip.js by this one in my fork here (1 line added to provide the functionality; the other changes are the bug fix)
@jbruni

Announcement

Alright, people in this thread, @dmackerman, @ThCC, and everybody else... I've "compiled" AngularUI Bootstrap with the popover-template directive (as implemented at pull request #1046), now it is totally easy for everyone to test.

It is available here: https://gist.github.com/jbruni/6737078
Just download the gist and use either ui-bootstrap-tpls-0.6.0.js or ui-bootstrap-tpls-0.6.0.min.js, just like you already are used to.

(Note: The difference from the official AngularUI Bootstrap 0.6.0 is very little. The patch is minimal.)

Usage

It works exactly like the popover directive, the only difference is: do not use the popover attribute; instead, use the popover-template attribute, informing the templateUrl.

Example:

<button popover-placement="right" popover-template="template.html" class="btn">Right</button>

Features

Of course, HTML is allowed in the template.

The template accepts bindings, which will be relative to the scope where the element containing the directive belongs.

If you close the tooltip and reopen it again later, the binding persists.

As usual, you can define your template through a HTML script tag:

<script id="template.html" type="text/ng-template">
    <div ng-model="meeting.date"><datepicker></datepicker></div>
    <p>A paragraph with a <button>button</button>!</p>
    <p>A paragraph with a binding: {{ user.name }}</p>
</script>

Feedback

Please, let us know if it works for you.

Thank you.

EDIT at October 6, 2013

Updated the PR and the Gist, including the several improvements made since this was first published.

@dmackerman

@jbruni dude, thank you! Will test this out tomorrow.

@rishabhmhjn

:+1: Waiting for this commit to get merged.

@graphicsxp

Anyone else is having this error ?

Error: [$compile:tpload] Failed to load template: template/popover/popover-template.html

And a modal backdrop shows up, stopping me from interacting with controls on the screen. This is how I call the popover :

<button class="grid-action-filter" popover-placement="right" popover-template="app/common/views/templates/gridHeaderString.html"> test</button>

@KilianSSL

@graphicsxp +1

<a href="" popover-placement="bottom" popover-template="popie.html" class="btn">open</a>
results in
Error: [$compile:tpload] Failed to load template: template/popover/popover-template.html

@ThCC

@jbruni thank you! Will test this very soon.

@jbruni

@graphicsxp and @KilianSSL - Sorry, guys. I've just added the "popover-template.html" to the list at line 2 (starting with angular.module("ui.bootstrap.tpls",) and this shall resolve the issue. Can you please try again? Thank you!

(Note: this was a "build" issue - the patch/PR remains the same.)

@graphicsxp

@AbdullahT +1 same problem here

@jbruni

@AbdullahT and @graphicsxp - thanks for the reports.

There are two ways to make the provided plunker work:


1) Use jQuery and newer AngularJS

Just substitute the angular.js script tag by these two:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>

This means it requires both jQuery and newer AngularJS! As this is my setup since I started with AngularJS a while ago, my "popover-template" implementation was working for me as is. With the change above, in the script tags, you can check the directive code just works, since these requirements are fulfilled.

Of course, this is far from optimal! So I investigated further, and I was able to make the whole thing work without the need of jQuery and with the older AngularJS. So...


2) Upgrade the custom AngularUI Bootstrap build:

Don't change the test code (index.html and script.js), and apply the changes I've made to the custom ui-bootstrap-tpls-0.6.0.js, starting at line 2258.

Here is the code before (which requires jQuery and newer AngularJS):

iElement.find( 'div.popover-content' )
.html( $compile( $templateCache.get( scope.content ) )( scope.compileScope() ) );

And here is the code after (now supporting jqLite and older AngularJS):

scope.$watch( 'content', function( value ) {
  var contentEl = angular.element( iElement[0].querySelector( '.popover-content' ) );
  contentEl.children().remove();
  contentEl.append( $compile( $templateCache.get( value ).trim() )( scope.compileScope() ) );
});

Look how tidy and clean it was. Now, for broader compatibility, the code is a bit longer, but not only performs the same work, but also included a new "feature": if the popover-template atribute changes (just like you can do by interpolating the popover attribute)... the new value will be used as new template name - the old template will be thrown away and the new one will be rendered. I can't find a use case for this - it's only a curious "side effect" of the new implementation.

Note: the new code depends on the trim function - so, it is not compatible with IE 7 without a shim.


Here is the updated plunker where I applied alternative 1:
http://plnkr.co/edit/NWxNwW6cbMRMbOPX44hG?p=preview

And here is the updated plunker where I applied alternative 2:
http://plnkr.co/edit/BxLmyZGJ2npkIbeXOob6?p=preview

Now, I need to update the gist, the pull request... but let me receive more feedback first - you guys are really helping. Thank you.

@graphicsxp

@jbruni, funny because I do use jQuery (1.9) and the latest AngularJS version already. And method 1 does not work for me. I haven't tried method 2 yet.

@jbruni

@graphicsxp - well... I've posted links to plunkers using method 1 and method 2 above... are you serious the "Got something!" popover does not appear to you?

Amazing! It must be jQuery 1.10 - it does not work with 1.9 - I guess it is related to the html() function call.

Anyway... we already have the portable code which runs without jQuery and at Angular 1.0.8 (method 2)... looking forward to a positive feedback... I couldn't imagine it would be so hard...

TIP: just copy the file from plunker-method-2 linked above... so you don't necessarily need to manually edit it yourself...

@graphicsxp

Ok, method 2 works. But only if the template is stored in a script tag. If I set the template to a url path, it's not loaded:

<button popover-placement="right" popover-template="app/common/views/templates/gridHeaderString.html" class="btn">html</button>

Is this normal behavior ? I cannot store templates in a script tag, they will have to come from a html view template.

@jbruni

@graphicsxp It was the behaviour that was fine to me. But not acceptable if we want this to be considered for wider adoption. So, I've tweaked it a little more, considering your feedback. Now it loads external template resource:

http://plnkr.co/edit/A780ruN5CUFyoRqI0LbZ?p=preview

Thanks a lot! You are helping with your feedback. I think it is good to go now. But let me hear from you once more...

In fact, I was misleaded by a small AngularJS video tutorial I've seen at YouTube... I got the wrong impression that $templateCache service would load the template file if not availbale... but this is not the case.

Please, check if it works for you. Thanks!

@graphicsxp

@jbruni Ok, it works now, thanks for your work, it's great !

One improvement that could be made (at least I coudn't get it to work), would be the ability to bind the template to a scope variable.
And also to be able to hide the popover when clicking on an element of the template (a close button for instance). I think this is related to another pull request for closing the popover programmatically, which is not supported.

Thanks again.

@hrasoahaingo

Is it possible to use string ( popover-template="'template.html'" ) or model ( popover-template="tpl" ) where $scope.tpl = 'template.html'

@jbruni

@graphicsxp and @hrasoahaingo - Yes, you can: popover-template="{{ tpl }}"

See it in action: http://plnkr.co/edit/5DbVaDQrnCrmlX9Upeuk?p=preview

Regarding closing the popover programatically, while it is not supported yet, my workaround was to "click the trigger button" programatically. I've used plain old jQuery for it, inside a scope function:

$scope.closePopover = function() { $('#popover-button').click(); };

Not exactly the "Angular Way", for sure - but a workaround which works.

EDIT: I do not currently have the intention (and availability) to implement this additional feature in my current popover-template directive implementation. This eventually may happen, but I consider a separate issue and "feature request" - which is also valid for the whole popover/tooltip directives (not only this "popover-template" directive).

I have only presented this code snippet here as a tip - a simple way to achieve the desired result while it is not supported. This is not something i have included in the directive code. Ok?! :sunny:

@clouddueling

@jbruni

Note the '.btn-close'. This will allow you to have a popover that looks like:

screen shot 2013-10-04 at 8 23 53 pm

<div class='popover-body'>
    <ul
        class='drag-list'
        on-change='updateCategoryOrder()'
        sortable="main.serie.categories">
        <li
            class='drag'
            ng-repeat="category in main.serie.categories">
            <i class='icon-move'></i> {{ category.name }}
        </li>
    </ul>
</div>

<div class="form-actions">
    <button class="btn btn-close">
        Close
    </button>
</div>

Line 2251

.directive( 'popoverTemplatePopup', [ '$http', '$templateCache', '$compile', function ( $http, $templateCache, $compile ) {
  return {
    restrict: 'EA',
    replace: true,
    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', compileScope: '&' },
    templateUrl: 'template/popover/popover-template.html',
    link: function( scope, iElement ) {
      scope.$watch( 'content', function( templateUrl ) {
        if ( !templateUrl ) return;
        $http.get( templateUrl, { cache: $templateCache } )
        .then( function( response ) {
          var contentEl = angular.element( iElement[0].querySelector( '.popover-content' ) );
          contentEl.children().remove();
          contentEl.append( $compile( response.data.trim() )( scope.compileScope() ) );
          iElement.find('.btn-close').click(function() {
            iElement.prev().click();
          });
        });
      });
    }
  };
}])

Not exactly the "Angular Way", for sure - but a workaround which works.

@clouddueling

After an unfortunate number of hours working with this I found an optimal way to work with forms in the popovers.
ng-submit was messing me the $#%& up and ended up working wonderfully fine like this even when I hit enter in an input field.

<form>
    <label>Name</label>
    <input
        ng-model='categoryCopy.name'
        type='text'>

    <div class="form-actions">
        <button
            type='submit'
            ng-click='updateCategory()'
            class="btn btn-success btn-close">
            Submit
        </button>

        <button
            type="button"
            class="btn btn-close">
            Cancel
        </button>
    </div>
</form>
@jbruni

FYI, I've just updated the PR #1046 and the Gist containing the proposed popover-template directive, including the recent improvements made.

EDIT - I am talking about these improvements - which makes the directive "100% Angular Way compatible":

  • jQuery is not necessary anymore
  • it works with both 1.0.8 and 1.2
  • accepts external template files

The quick & dirty trick for closing the popover programatically that has been presented by me here is not something I've considered as "improvement" at all. It is only a tip for our friend here. It has not been included in the directive code. Sorry if it wasn't clear. Thanks! :-)

@ThCC

If what is being done to improve, is not in the Angular Way, then these changes will not be incorporated into the main branch?

@graphicsxp

@jbruni , Ok, I wasn't thinking, referencing the template using a scope variable was pretty easy indeed.

@clouddueling, wow that's pretty much what i'm trying to achieve. I've tried your method but when I search the .btn-close button, nothing is found. I've put together a plunkr to repro the issue : http://plnkr.co/edit/TJHhTq?p=preview

Basically, in the gridHeader directive, I've tried accessing the .btn-close element using jQuery and jQLite, but I think the element is not on the page yet (because I use a template maybe ? )

@clouddueling

@graphicsxp I believe I tried something similar but was only able to get it to work like this. http://plnkr.co/edit/OBedwI?p=preview

Thankfully the popover is created in the same spot every time so we know where the btn is to close it.

@ThCC I think it was more of a joke as he was figuring it out, because @jbruni has done a great job of containing all his jQuery inside a directive and his code is minimal.

@graphicsxp

@clouddueling, sorry I posted the wrong plunkr... I got it to work using your method, but the problem arises when I start using transclusion for footer buttons (so I don't have to put the buttons in every templates) see pluckr (the good one this time :) http://plnkr.co/edit/almK6d?p=preview

@clouddueling

@graphicsxp
I initially was trying to create a hide() function that I could run in my Ctrl as service or on ng-click. Basically achieving what you're trying to do here.

For some reason I could not select anything inside this popover template. I attached a generated id, .parent(), .closest(), etc. I don't fully understand why but that template was somehow isolated from the dom.

@jbruni

@ThCC - The pull request and the directive have been greatly improved - the code is 100% Angular Way now:

  • jQuery is not necessary anymore
  • it works with both 1.0.8 and 1.2
  • accepts external template files

All the found issues have been properly addressed - not to mention it is free from memory leaking and bindings works flawless. Period.

@graphicsxp wanted another feature - to close the popover programatically (as we can do with modals). This is not supported. This would be another issue, another research, another pull request.

Yet, I myself have included a "close" button in a popover, and only shared how I have done it - while the proper support is not available - and this is simple to do: it involves triggering a click in the element which is bound to the popover.@graphicsxp wanted to do it, and I told him how I am doing - but this is not an "improvement". This has not been included in the directive. In fact, as a workaround, it is not necessary to modify the directive code to achieve this functionality.

I'm sorry this really wasn't clear in the discussion above, @ThCC. I hope it is now: great effort has been made to make the directive suitable for merge - totally Angular Way!!! :-)

The "simple workaround to programatically close popover while it is not supported" has been mentioned only to help our friend to make it happen. Ok? I will edit my previous comments to avoid this confusion. Thanks for pointing it out. Please, accept my apologies.

@ThCC

Many thanks @jbruni
Thank you too @clouddueling

@graphicsxp

@clouddueling, I'm not sure I understand your reply, do you mean you've tried transclusion too and it didn't work as expected ?

I second @ThCC, huge thanks to @jbruni for the great effort and very helpful support. Thanks to you too @clouddueling .

@jbruni

@clouddueling - while I'm interested in the discussion, I do not have the time to dig into it right now - I'm very busy doing my work. I'm happy to see progress and I will take a look when I have the time. Thanks! :thumbsup:

@clouddueling

@jbruni Totally understand btw I'm deploying this today so tyvm!

If I figure out a better way of a close btn I'll post it.

@godza

Really hope that this will be done asap. I really need popover to be much more than just plain toggleable tooltip.

@jbruni

@godza - While it does not exist in the official release you may want to use it from here: https://gist.github.com/jbruni/6737078

You can use a diff program to see the differences and be confident that the only modification is the discrete inclusion of the enhanced popover functionality.

Usage: <button popover-placement="right" popover-template="template.html" class="btn">Right</button> (do not use the popover attribute; use popover-template instead)

@godza

Great, thanks. One more question. Will your patch get into official release?

@jbruni

@godza - Just saw your question now (I've not been notified by email as usual). The answer is: I don't know. The pull request is waiting for a review. Nobody qualified to do it seems to be available.

@godza

Hope it gets through. Thanks a lot!

@kencaron

Just wanted to give big thanks to @jbruni
Discovered I needed this for my app today and it seems to work. Hope it makes it into an official release ASAP

@yesman85

+1 Great job @jbruni! I hope this will make it to the next release.

@theblackbox2600

is there any news on this - I know there must be a lot of work with regular updates and what not but this is a very desirable feature. I'm playing with the "beta" code as provided in the meantime but would really like to see this in -stable.

@royts

+1

@theblackbox2600

@jbruni I'm sorry to wade in on this one but I cannot for the life of me get ANY of these example/plunkr versions of the ui-bootstrap popover-template function to work. In ALL attempts I end up with the digest problem (where the watcher is reapplied/fired in an infinite loop as the template is compiled? at least that's my understanding).

I've tried everything I can think of but I'm not well acquainted enough with all the components to debug this further.
If anyone has any ideas then I would be very grateful for the help. This is a major feature request from my client and this would really help me out loads. Thanks for all your good work.

@Yappli

@theblackbox2600 : Can you give examples or jsfiddle links ?

@theblackbox2600

I'll set up a plunker for my exact scenario, but I can't see any differences (in principal) from the one posted in this thread: http://plnkr.co/edit/5DbVaDQrnCrmlX9Upeuk?p=preview

@theblackbox2600

yep, as I had suspected it works inside a plunker (http://plnkr.co/edit/WKifl2mF75dMXYcypIMU?p=preview)

double plus confusing

@theblackbox2600

So I'm beginning to think it may be because I'm using jade in my project?
This would make some sense as that might explain why the infinite loop is occurring as the template is compiled first by jade and then to apply the popover-template? Does that make sense?

@theblackbox2600

so I'm obviously confused - it couldn't be anything to do with Jade as that is server side... I'm going to go and flagellate myself with Cat5 for this blazing oversight.

@theblackbox2600

Once again I'm sorry to pollute this thread, after self-flagellation a certain zen like clarity came over my thinking and I began wondering: "you know that boneheaded mistake about where the jade templates were fitting into this whole mess? Maybe you're twice as stupid as you give yourself credit for and were making the SAME mistake about the popover-templates!?"

And sure enough - I am twice the man I thought I was....

... sometimes that obvious distinction between client/server just slips from my mental grasp and I end up in a world of pain.

@Yappli

@theblackbox2600 It is ok, the most important thing for everyone is to be sure the @jbruni's code is cross-compatible. Thanks for your reporting.

@wwchen wwchen referenced this issue from a commit in wwchen/prime-restaurants
@wwchen wwchen Using a forked Angular UI popover implementation
The official AngularUI implementation does not support html in popover content.
Performance sucks ass though. UI isn't great either.
Simple demo: http://plnkr.co/edit/Ea29kz4za3aDGAdn6mVe?p=preview
Source: angular-ui/bootstrap#220 (comment)
7aea03f
@wwchen wwchen referenced this issue from a commit in wwchen/prime-restaurants
@wwchen wwchen Using a forked Angular UI popover implementation
The official AngularUI implementation does not support html in popover content.
Performance sucks ass though. UI isn't great either.
Simple demo: http://plnkr.co/edit/Ea29kz4za3aDGAdn6mVe?p=preview
Source: angular-ui/bootstrap#220 (comment)
2301f4a
@websirnik

@jbruni is it possible to update your gist https://gist.github.com/jbruni/6737078 with the 0.7.0 code.

@jbruni

Hi, @websirnik - I've just applied the changes to the 0.7.0 code and added the files into the gist at https://gist.github.com/jbruni/6737078

It is supposed to work, but I have not tested it at all. Can you please download and use it, and tell us if it is working fine at 0.7.0? Thanks!

@madhums

@jbruni it works! Thanks!

@Yappli

@zero- opened this issue 9 months ago ! After 138 messages, are we going to deliver a little popover-baby thanks to @jbruni ?

@appu3239

thanks for the help @jbruni it solved my problem. please make this feature official!!

@JhonatasMartins

this feature is official ? i need it haha

@jmoberley

I can also confirm working in 0.7.0. Thank you very much, @jbruni!

@smithwinston

@jbruni Hmmm ... seems like this breaks $watch. I have an <input> with an ng-model wrapped in a div with an ng-controller. The controller establishes a $watch on the <input>'s ng-model ... adding the popover-template directive to the <input> seems to break the binding.

@Yappli

@smithwinston : Interesting case ! Do you have a jsfiddle ?

@smithwinston

@Yappli Here you go:

http://plnkr.co/edit/8ELk6ohGJua942QGY1HV?p=preview

If you remove the popover-template="..." from the <input> then the binding works (the $watch logs the changes to the contents of the <input> to the Javascript console, but it's also bound to the <div> below the <input>).

Thanks!

@jbruni

@smithwinston and @Yappli - I've created a Plunker... and I will open a new issue, because it is not a popover-template problem, but a popover one, which popover-template merely "inherits":

http://plnkr.co/edit/CkDz3n?p=preview

@jbruni

Hey, @Yappli ... I've just removed the popover-template usage from your Plunker, and the bug is still there. Conclusion: it is a popover issue... you've found a bug in Angular UI Bootstrap... look: http://plnkr.co/edit/e9XnKM?p=preview

EDIT: this is no bug, but a scoping issue (as pointed by bekos below)

@smithwinston

@jbruni You are right, if I swap popover-template for a regular popover, then I still see the issue.

@bekos
Owner

It is a scoping issue: http://plnkr.co/edit/aW5ZlY?p=preview

@smithwinston

@bekos Not sure I understand that. It seems that the mere presence of a . in the variable name resolves the issue.

Anyway, I have a workaround even if I don't understand it!

Thanks!!!!

@jbruni

Thanks, @bekos

@smithwinston - the popover directives create a new scope... just like you've probably been warned about regarding "ng-repeat" and others, here you also need to take care with this fact (the creation of a new scope). You already know the "workaround"!

Full explanation here: https://github.com/angular/angular.js/wiki/Understanding-Scopes

@Yappli

Hope the pull request of @jbruni will be merge this time ! Why is-it so long ? Nobody knows...

@wedgybo

Great job @jbruni and can't wait to see it merged in mainline.

I've a question for anyone about how they handle components inside the template that need the dom updated once the popup is generated? I've got a few components that fix themselves if the window is resize. So I've got an issue with the parent container not having the correct widths when the child directives are processed.

Has anyone come across this issue and have a simple way around it? I'll try and make plunkr tonight people don't understand what I'm getting at.

@Rodeoclash

Usually by judicious use of the $timeout directive.

@yngvark

In case anyone needs a hackish version of popover with HTML, try this: http://plnkr.co/edit/7O7DD094qg4wClbdBQvo?p=preview (github: https://github.com/yngvark/snippets).

@farolfo

+1 on this ! Instead of reading the hole thread of messages, could some one tell me if this is or not supported in the code ? I think not after reading the code hehe. or if it is likely to be delivered.

@yngvark

@farolfo Not sure what code you are referring to, but if it's my code/post you are referring to, it's definitely not supported or official in any way. It's just a hack I made to make HTML in popovers work for my purposes.

@amillerKinnser

Hey, this is a very long thread and is difficult to figure out what parts are the solution. From what I gathered, the solution still has problems? Or am I wrong? Can someone please point me in the right direction for what the final result should be/look like? Is this also going to be updated into the master code?

@Yappli

@amillerKinnser : The final code is ready to use. It's the last PR of @jbruni.
I don't know why the PR has not been merge yet.

@arjunasuresh3

@jbruni is it working in ui-bootstrap 0.9.0 version?

@arjunasuresh3

@jbruni - How to bind the scope of a controller to template being used in popover-template attribute?

@jbruni

@arjunasuresh3 - Acknowledged your messages! I have not ported to 0.9.0 version yet, but your asking motivated me to do so. Coming soon. (ETA: Later today or early tomorrow.)

Regarding scope binding of the template - it binds to the same scope of the HTML element where the "popover-template" directive resides (i.e., the element which triggers the popover).

@websirnik

@jbruni 0.10.0 is out. May we ask you to do for this one as well. Merci :)

@amillerKinnser

+1
Looking forward to the update!

@Yappli

Thanks for you time @jbruni. It's precious for all of us.

@jbruni

Hi, guys, @websirnik, @amillerKinnser, @arjunasuresh3, @Yappli and all... I've updated the pull request code for version 0.10.0. It is here: #1593

I am also providing a working plunker with the compiled files (ui-bootstrap-tpls-0.10.0.js and ui-bootstrap-tpls-0.10.0.min.js):

http://plnkr.co/edit/B2wEis?p=preview

So, if you want the upgraded "popover-template" directive ready-to-use then just go for it in the plunker.

NOTE: My implementation relies in the "detachment" and later reuse of the "detached" tooltip/popover DOM. So, I had to revert a recent change in the code that tries to enforce the "removal" of the DOM and binded data/events. There are no side-effects, though. What this really means is: chances of merging are minimal. So, consider it as a temporary solution, while the official implementation is not available. Thanks.

@nnjpp

Thanks, jbruni. This will save me until an official solution is out

@rainboxx

Thanks @jbruni! Does anyone knows of plans to integrate this PR into an official release?

Popovers without HTML inside doesn't make sense for us, still we want to rely on bower to install dependencies without the need of patching them.

@chrisirhc
Owner

I'm looking into this right now but I can't promise a timeframe at the moment.
I am going through some other issues with regards to scope/content resizing for the tooltip. These issues affect and block the addition of this feature.
I have already assigned a milestone to this feature and I understand the importance of this feature.

Note: I'm working on this independently right now to attempt to arrive with something reasonable for discussion with the other contributors of the project. I hope users understand that this project is driven by the community and I am just one person part of the community. Coming up with a solution that others in the community can agree upon is challenging. Having commit rights doesn't change any of that.
Thanks everyone for your patience and continuous feedback. :beer:

@rainboxx

@chrisirhc thanks for your reply. If there's anything we can do, let me know. I think I can free up some time to contribute.

@amillerKinnser

@jbruni - thanks! This seems to be working like a charm.

One other question, I'm trying to pass data through the template dynamically, but there seems to be a problem. The popover opens very slow and when it appears the values are blank. I'm wondering if something has changed in this specific version or maybe I'm missing something. This was working before the upgrade. Has anyone else tried loading data dynamically using the popover-template? Was it successful?

Thanks!

@amillerKinnser

FYI - one other thing I noticed is that the "popover-template" attribute doesn't work in Chrome properly. The popover appears with no content, but in FF and Safari the content appears.

@rkarakaya

another FYI..

it doesn't plays well with tabs. An empty content shown on first click if it is inside a tab.
On second click it shows the content.
Another issue regardless of tabset is that the popover pointer loose it's position when remote content rendered.

@stylenclass

Hi Guys,

I get around this problem by editing the template

from:
  <div class=\"popover-content\" ng-bind=\"content\"></div>\n"
to:
  <div class=\"popover-content\" bind-html-unsafe=\"content\"></div>\n"

You can easily override the template via ng-template if you don't want to mess up with the source, eg:

<script id="template/popover/popover.html" type="text/ng-template">
    <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" bind-html-unsafe="content"></div>
        </div>
    </div>
</script>

So no need to add custom filters, just need to override the template and just add html in your popover

popover="<b>html here</b>"
@ispringer

For the record, AngularStrap 2.0 has gone native and still supports templates (either URL's or template cache id's) for popovers, as well as for alerts, asides, modals, and tooltips.

@Gamemaniak

@ispringer Thank you for your contribution, very helpful..

@mismith

+1

@calvinl

@stylenclass didn't know I could just override templates like that -- very useful, thanks!

@stylenclass
@johnculviner

This pull is getting rediclous. If something can't make it in in 11 months and 182 comments than something is broken. I'm just going to use this one and be done with it: http://mgcrea.github.io/angular-strap/##popovers

@nnjpp

Every day I check for updates in the mailing list, or issues, or the tooltip refactor branch and I'm just not seeing any light at the end of the tunnel. I'm starting to wonder how actively maintained this project is overall. I don't mind using a fork with fixed popovers right now, but once my project is close to production I'm going to be really concerned. Sorry if I sound whiny, just restating the obvious - this is very important functionality and not worth holding off on IMO unless the tooltip refactor is nearly finished. Moving all of my components off of ui-bootstrap is the last thing in the world that I want to do right now.

@richcouzzi

+1 would love to know where we stand on this.

@ludoblues

Good to know there are other projects evolving but i looked around and angular-strap seems to be depending of jQuery...

@intellix

Angularstrap 2.0 doesn't need jQuery supposedly: "While it worked pretty well, it required a big javascript payload: both jQuery & Twitter Bootstrap libraries. When the 1.2 release of AngularJS showed up with the ngAnimate module, greatly simplifying DOM manipulation, we knew it was time for a rewrite!"

@johnculviner

Yup there is NO jQuery dependency. Here is a demo of it easily doing what we wanted on this pull all along weighing in at 2.73 KB Gzipped. This also works with Bootstrap 2.3.2 AND 3.0. Hope this helps someone avoid some hassle / waiting for this to go through. I have AngularUI Bootstrap in my project but I'm going to use this for popovers:

http://plnkr.co/edit/iwSm1geI0AzJeeLhIHxP

Docs here:

http://mgcrea.github.io/angular-strap/##popovers

@Foxandxss
Owner

Don't worry, we are working hard for the 1.0 release. There are a lot of stuff to do (mainly angular 1.2 compatibilty) and this issue is one of the things we have to do. Don't desperate, we are going to fix it, but take in mind that this is something we all do in our free time. PR are always appreciated also :)

@nnjpp

Thanks for the update and all the hard work. Good to hear that things are still active. I'm sure it will feel amazing to close this issue when the time comes. Sometimes it's hard to follow what the development roadmap is in detail, and I think that's one of the things that has a lot of people wondering what's going on. I see a good amount of issues for the tooltip component - is there any particular one that's blocking this more than others? I would love to help move this along in any way I can.

@farolfo

Does anyone know a better way to track this issue in particular ? I mean it'd be great to see how much this feature in particular is in progress so we can improve the code or different approaches in a better way than just a huge thread of messages haha
I'm not saying all here is un useless at all, just that is very hard to know the status of this feature so we can contribute as well on it :) May be something like a list of the "top solutions" for this in different branches of the project, what do you think?

@JPM84

@johnculviner Thanks for the plunker, this solved my problem for now.

@veewee

+1
Also a controller and a resolve attribute like the modal should be nice.
This way, it is possible easily configure / reuse these popovers.

@ktong

+1
Progress indicator when resolving should be plus.

@Yappli

@ktong : My preference is to make a progress indicator displayed if the resolving takes more than 500ms.

@ktong

@Yappli: Totally agree. better if it's configurable

@chrisirhc
Owner

Just an update on this, I've put up a work-in-progress version on #1848 .

@richcouzzi

@chrisirhc - Thanks for this. Is there a ui-bootstrap-tpls .js file?

@richcouzzi

@jbruni - I have been using the plunk/code you provided here but I've realized setting popover-trigger="focus" doesn't work in Firefox. The element in question is a <button>, so I don't know what the issue could be.

Here is a plunk with the issue: http://plnkr.co/edit/0XpDmtTN4yjixssmazd5?p=preview

@neutmute

@JBruni - your most recent iteration works well for me. thanks for your effort.

@dmackerman

Working for me, except there seems to be a placement issue whenever you open a popover for the first time. The 2nd time it positions properly.

First time:
first

Second: (correct)
2nd

@jbruni

Just FYI

Only now I've updated the project where I am using my custom popover-template implementation to Angular UI Bootstrap version 0.10.0

Three months ago I've posted here about an update of this custom solution for 0.10.0 - but I have never used it myself.

For anyone who may be interested, I am posting now a new version I've just tweaked for my own project needs. Since now I am using Bower and RequireJS, I've cloned bootstrap-bower and created another repository based on it. So, in my app, I can switch from my custom version to the official one very easily, changing bower.json:

// this is for the official version:
"angular-bootstrap": "0.10.0"
// this is for my custom version:
"angular-bootstrap-jbruni": "0.10.0"

...and the RequireJS path config:

// this is for the official version:
"angular-bootstrap": "vendor/angular-bootstrap/ui-bootstrap-tpls",
// this is for my custom version:
"angular-bootstrap": "vendor/angular-bootstrap-jbruni/ui-bootstrap-tpls",

So, whenever the official support of the feature is implemented, I will be able to switch to it easily.

Finally... the new version is available here!

For those who wish to know about the implementation, the exact difference between the official release and this custom version can be found at this particular commit diff.

Things to notice:

  • Now the template is retrieved at compile time. So, once the trigger element is rendered, the template is being loaded. The template should be already loaded when the popover is triggered. (Before, the template would only start loading when the popover was triggered, causing delays and positioning issues.)

  • No support for changing template by changing the popover-template attribute anymore. I simply didn't need it, and facilitated the implementation for me.

I hope this helps.

@jbruni

Also FYI... I've just included support for interpolated "popover-template" attribute.

Please check the details in the README at https://github.com/jbruni/bootstrap-bower-jbruni

Thank you.

PS: @dmackerman - can you check if the placement issue goes away with the new implementation? Thanks!

@ludoblues

Thanks for your work @jbruni ! it works well for me.
I hope the team will consider your pull request.

@jefffohl

@jbruni Just trying your PR now. Works beautifully so far. Nice work!

@oracleruiz

@jbruni Could you create a demo page, please?
In order to see the control in action.
thanks

@oracleruiz

@jbruni Thank you. Also I put some recommendations / notes in the issues section for your github project. This is a good iniciative and has a great potencial.

@kencaron

@jbruni I just ended up implementing @chrisirhc's PR #1848 as I was looking for a quick popover patch on a per-module basis.

Would be be a pain if your bootstrap-bower-jbruni repo contained the affected source files in the src and template directories? Again, thanks. I find that I need this feature on just about every Angular project I do.

@jbruni

@kencaron - I've forked angular-ui/bootstrap and created an enhanced-0.10.0 branch on top of the 0.10.0 commit.

Checkout this branch and you'll have the affected source files in the src and template directories. Here is the commit: jbruni@4e81c61

[off-topic] BTW, I've just backported/merged current datepicker@master into 0.10.0 because I can't wait until next release to have the month picker: #1775 - if anyone else is interested I can make it into this "enhanced-0.10.0" branch too...

@kencaron kencaron referenced this issue in jbruni/bootstrap-bower-jbruni
Closed

popover-trigger="focus" implementation #3

@mdhari

Someone give this man a cookie.

@seiyria

+1

@jon-chung

@jbruni Thanks a lot for that code, it's highly appreciated!

By chance, would you have a 0.8.0 file lying around with the patches included, for those who are stuck with Bootstrap 2.3.X because of old IE support requirements?

@bilalaslam

:+1: give this man a hug

@bheithaus

Nice work guys! does anybody have any guesses on when this might get pulled into the main Repo?

@Siyfion

It's a shame that this missed the 0.11 release, any idea why?

@monsoul

@joshdmiller Anything change in 0.11? I cann't use popover-template in 0.11.

@monsoul

I cann't use popover-template to bind a html page :(
popover-template="../../partials/toolTip/product.html"

@seiyria
@joshdmiller
Owner

@monsoul Indeed you can't because that feature doesn't exist. There are pull requests and discussions, but it is not implemented.

@siyfion - It nissed 0.11 for lack of time and effort. I'd love to see this get merged too, but personally have not had the time to do so. Unfortunately, until one of us does, it will stay out.

@web2style

@joshdmiller So will popover-template feature be implemented into the main branch?

@sathify

@joshdmiller same question - any idea when this will be in the main branch?

@mikeacook

@joshdmiller Same question here. I realize it isn't useful to pile on, but consider this my up-vote to get this merged in :smile:

@chasemgray

Another vote to merge this in.

@jbruni

Actually, if you are using bower, you can just change "angular-bootstrap" to "angular-bootstrap-jbruni" to have the popover-template available at 0.11, from my custom repo. The actual changes in the source code are few, and can be seen here: jbruni@4e81c61

I am using it while the official implementation is not available. Others are using too.

@kevinhikaruevans

Hope this gets merged in soon! :+1:

@hasmanyguitars

Another vote here

@Siyfion

Common guys, I really think the ball is being dropped here; you can clearly see from the volume of responses to this issue that this is an important feature for a lot of people to have. There are now a number of pull requests that give different ways of implementing the feature, so you could take your pick, or at least use one as a decent starting point.

This issue has been going on for over a year, can we please do something about it? I really am starting to feel quite sorry for the community members that have taken so much of their own time to create PRs for this project, I feel like there's nothing more we as a community can do now, yet the issue persists.

@nnjpp

Honestly, I think this project needs a community fork built around inclusivity so that things like this can either get done, or the debates over how to do it properly can occur publicly (then it can get done)

@ghost

@jbruni thank you very much for your fork.

Another vote to merge this in.

@Toskv

+1

@emmaguo

+1

@jordanpapaleo

So I have decided to stop waiting and use the modular approach of these libraries. Make a custom build of angular-bootstrap and forgo including popovers. Go the AngularStrap and only use the popover components. Done! Took about 5 minutes and everything works great.

+0

@funkyan

+1

@TheDom

+1

@unsalted

+1 Please get it done!

@owenXin

+1. It is really a very useful and common feature.

@Thierry36tribus

Thanks to @jbruni, great job!

@NicholasMerrill

Thank you @jbruni ! For everyone else who wants this feature without having to go to angular-strap, I highly recommend J Bruni's repo that includes the popover-template directive for version 0.11.0.

I understand you guys at angular-ui are busy and doing this in your free time (I'm sure not capable of writing any of it), so no hard feelings. I'll come back to your repo as soon as you have the opportunity to merge Bruni's code.

@TomHoss

+1 Would love to have this merged

@brownbathrobe

+1 Please merge it in, captain...

@danparm

+1

@calekennedy calekennedy referenced this issue from a commit in calekennedy/bootstrap
Cale Kennedy feat(popover): merged in templating as per requests in issue #220 eea2ab9
@calekennedy

I submitted a pull request that adds template functionality into the core library.

#2479

@ganeshran

Is @jbruni 's code change pulled into the official release?

@naimdjon

+1

@kavuri

+1

@hartror

+1

@sunild

+infinity and beyond! This issue makes me laugh. Practically two years later, the only solutions are to use Angular Strap or JBruni's code (and keep patching if you upgrade to the latest version). I gave up long ago on this being included and now use Angular Strap for this functionality. Unwatching this issue b/c I'm tired of all the simple +1 comments in my inbox :) Good luck!

@Yappli

+1
I'm also using AngularStrap for this fonction.

@dscerri

+1

@Igosuki

Wow guys, pulling a whole other repo for one option on one directive. That's pretty unproductive and overengineering.

@SonofNun15

Looks like we're probably jumping ship to AngularStrap as well. Don't want to be mean, but the fact that this hasn't been touched in forever despite the fact that it is a highly wanted and clearly important feature seems very lame.

@RobJacobs RobJacobs referenced this issue from a commit in TylerTechnologies/bootstrap
@RobJacobs RobJacobs Merging issue #2479 & #220 - Support template for Popover content cbb42d0
@niftybit

No idea why there has been no progress on this issue for 18 months. Heartbreaking.

@Yappli

If you include angularStrap in your project only for the popover, I recommend you to make your own file with only the following modules (in the same order as mention) :

mgcrea.ngStrap.helpers.dimensions
mgcrea.ngStrap.helpers.parseOptions
mgcrea.ngStrap.tooltip (+ HTML templateCache)
mgcrea.ngStrap.popover (+ HTML templateCache)

With this way my file is smaller and I keep UI bootstrap for everything else.

@SonofNun15

@Yappli, that's what we ended up doing as well. Pulled out just the popover from angularStrap and had to rename the tooltip provider so that it wouldn't conflict with angular ui.

@Igosuki

As shown by @RobJacobs above, you only need to add a few lines and reuse $tooltip. That seems pretty simple. Absolutely no need to drag another lib into this.
The only problem here is that the number of allowed comiters is too low for the number of forks.

@hrajchert

I also would like to see this feature, such a shame is stalled like this.

@jeserkin

Could anyone post summary here, regarding the issue? Will/Is it [be] solved? Will/Is [be] in development?

@chrisirhc
Owner

Latest status

See #1848 . We need reviewers and testing for that PR.

@lekhnath

Urgent here!

@ScottKa

Could we get an update on this one?

@thevictor13

Should we all expect this upgrade to materialise in the near future or we're better off by looking for alternate solutions?

@stramel

+1

@bcherny

+1 we're very close to migrating off angular-ui-bootstrap because of stuff like this..

@NeevShah

Is this feature available now? Or should we use popover-html-unsafe? Please replay me..

@stramel

@NeevShah @bcherny You guys can use the popover template that is in the PR #1848 using my repository until it is released officially. I have made it really easy to switch between official and my branch by compiling the code for you.

@jokomo

can we get some indication of where this is at right now?

@stramel

@jokomo It is slated for 0.12.0 according to the milestone. If you look at the milestone, it appears about 75% of it is complete. In the mean time you can see my comment above for useful information.

@RobJacobs
Owner

I wouldn't mind so much creating custom packages with unreleased pull requests if there was some indication which direction this library was going. Case in point, 2 competing pull requests for this functionality. Which PR is going to be adopted in the 0.12.0 release? If it's going to be #1848 close this PR and reference that one.

@stramel

@RobJacobs There is only one PR out currently. ( #1848 ) This is a issue which is what was initially filed in order to make the developers aware of the issue. The PR is there to submit proposed changes that address this issue.

@furkankatman

@joshdmiller is this bunch of conversation about binding html to popover directive ? is it still a phenomena?:)

@jamesmorgan

+1 - would be good to make some progress on this.

@stramel

@jamesmorgan All progress is being logged at PR #1848. We are still needing people to test and report issues before it can be merged in and officially supported.

@DaveWM

I got fed up waiting for this feature, so I made the ngPopoverButton directive. Posting it here in case some of you guys find it useful.

@stramel stramel referenced this issue
Merged

feat(popover): support templates #1848

4 of 4 tasks complete
@QuentinFchx

What is preventing the PR to be merged (apart from conflicts) ?
I'd be glad to help fixing the last issues!
It needs to be merged asap because this is becoming hilarious (1 year issue, with 200+ comments, on a 7k stars project, just to allow html in a popover...)
#opensourcefail

@QuentinFchx

The 0.12.1 milestone only contains the #2996 PR tagged as needs:merging. How can I help to make this happen ?
This will allow us to move forward toward 0.13.

@karianna
Owner

We'll be merging that issue at the next maintainers meeting. @chrisirhc will be teaching the rest of us new maintainers to cherry pick the fix and perform a full release. Then we get onto the hard work of triaging the ~120 or so PR's out there :-).

@stramel

@karianna :+1: This is great news for this library.

@nnjpp

That is such an enormous relief. I was under the impression that the project had seriously lost momentum but it looks like I'll soon be able to start recommending it again.

@karianna
Owner

Well I'm not going to promise miracles as there are 187 outstanding Pull Requests to get through for starters, but yes you should start seeing some movement over the coming weeks.

@Yappli

Marvelous !

@metanav

Any progress? I understand guys are working purely part-time and unpaid and I appreciate that.
But I think this issue is blocking many of us.

@karianna
Owner

Meeting tonight to begin the first steps.

@Alos

Hey guys? Did you got a chance to talk about this?

@karianna
Owner

No, our priority is to get Angular 1.3 compatibility - next step is to triage 200 open PRs, step after that is to triage 300 open issues. Then we look at the rest :-)

@starf

I do not comprehend. Been using 1.3 since beta without a problem. The amount of response here is ridiculous.

@mattdarveniza

Wait, so this wasn't discussed at all? I appreciate that you're trying to get this project back on track after it completely fell of the rails for whatever reason, but this issue is coming up on it's 2 year anniversary (and it wasn't even the first to request this functionality), all the while people are forced to use other libraries like angular-strap, fork this repo and make the fix themselves, or do crazy duck-punches in their projects, all for what is a relatively simple change that has a PR ready to go. If this doesn't come through in 0.13 it's going to be hard to justify recommending this library to anyone anymore.

@forza020

Guys, use angular strap (http://mgcrea.github.io/angular-strap/) until this issue will be fixed. The same number of features + popover has HTML

@seiyria

@forza020 it's not a clean switch. You can't put templates / html in your dropdown menus cleanly, for example. You just have to consider what features you need and pick the best one based on that; it's not as simple as "they still don't have feature x, just go use y."

@forza020
@yordis

This was in 2013, today 2015 still without any update about it. This is the reason why people great forks and boom a new javascript framework because even when they take the time for create the PR for contribute.

@forza020 I will take a look to angular-strap, hopefully is a good route to go.

@danielcompton

These comments aren't adding anything to the issue, I recommend locking this issue to contributors, and updating it when the feature is added.

@yordis

@danielcompton your suggestion is shut down the opinion of the people. This add value to the issue, you know why, because you can see the effort from them. People like me trust them and the fact some guys even create the PR + Unit Testing + Doc and they don't do anything about.

This was 2 years ago sir, this wasn't 1 month and look the how many +1 are here ..... Close the comments, "good way" of fix problems.

@danielcompton

@yordis I think we're all well aware of the need for this feature, and I too am frustrated that it's not available yet. However GitHub issues aren't the place for complaining about a bug or missing feature - they're for fixing it. The negative comments aren't adding anything of value, and they're bringing down the contributors. If you want something to change, your options are:

  1. Become a contributor to angular-ui, and land the patch in a way that fits with the contribution guidelines
  2. Do nothing and wait for the feature to arrive sometime in the future
  3. Use a different UI library with this feature
  4. Use a fork of angular-ui with this feature

If you just want to complain, then I suggest you save it for your bartender :wink:.

@hallister
Owner

This issue is a tough one, largely because it's been buzzing around for so long. I've been debating the merits of closing this for I don't know how long, largely due to a couple of significant fixes for this issue as open PR's. And since I'm not actively contributing to the project right now, it's debatable whether or not I should.

That being said, this project lost momentum as many of the maintainers had to real-life obligations and other projects take over. As a result the current/new maintainers have a lot of work ahead of them with some 200 PR's and over 500 open issues.

As a result, I'm going to close this for now (with the caveat that a current maintainer is more than welcome to re-open for any reason). Not because I have any desire to close down discussion, but because this horse has been dead a long time and it's less a matter of needing a fix and more a matter of needing to fix other things in order for this to get merged in.

@hallister hallister closed this
@DaveWM

@hallister surely in the time it took you to write that comment you could've just merged in one of the multiple open PRs for this (#1848,#2479, etc.)

@hallister
Owner

@DaveWM Both of those have merge conflicts that need to be sorted out and I'm not actively contributing to the project right now, so it's highly unlikely that I could have merged it quickly.

Furthermore, because there are so many outstanding PR's, merging into master right now is going to do nothing more than cause more problems. With 200 open PR's, a great deal of care has to be taken on what gets merged.

I realize everyone is frustrated with the pace here, but this is still an open source project developed entirely by volunteers. I realize this issue has been around for a long time, but it's going to take a little more patience before this is merged in.

@RobJacobs
Owner

@DaveWM @hallister My thoughts are this should not be part of the library. We should be focusing on making directives that have a single responsibility that people can use as components to build more complex directives. We shouldn't build directives that transcludes 2 different content areas, handles dismissing, and handles popup placement all in one. Rather these should be discreet directives (dismiss, placement, etc...) that are independent and can be re-used. That being said, here is a plunk that demonstrates that approach for the popover. You will notice I am using the native TWBS markup and classes to build the popover and only have a single directive that handles the dismiss. No need to transclude content, or trigger a scope.$apply to reposition the element after content changes, or the numerous other rabbit holes we go down to support a 'god' directive. While it is convenient not to have to write all that html, that should be a convenience reserved for simple cases.

I am also working on an approach for more placement options by using classes (can be bound to ng-class for dynamic placement), which can be seen in this plunk. This does not use pixels to set top, left, right, or bottom so as content grows, the container will resize without losing the anchor point.

If you are set on template support in the existing popup directive, I have a pull request here with all conflicts resolved against the current master branch,

@seiyria

@RobJacobs I strongly disagree that this shouldn't be part of the library, and clearly so do many others. If the goal of this library is to recreate TWBS functionality with Angular-style markup, anything like this should definitely support templates at the bare minimum.

@DaveWM

Completely agree with @seiyria. @RobJacobs, you seem to be saying that the entire popover directive should be re-written, and regardless of whether that's a good idea or not, it's not really what's up for discussion here. Also, I hardly think adding something as simple as dynamic content would make popover a "god directive".

@pioneer903

Interesting thing, but it looks like popover template worked before. I found working plunkr with angular 1.2.9. However 1.3.x doesn't work.
As an alternative, i found nsPopover. Going to give it a try

@jbruni

Since my previous comment on 28 May 2014, I've been away. Surprised to see that this is still an issue, I have just made a new version, mergeable to current HEAD.

There is a difference now. While I was not expecting merge for my previous versions, because I knew they dissonate from the project's "roadmap", so to say... this time the patch does not affect absolutely nothing on existing code and embraces the design decisions taken. (While I previously made it NOT destroy the tooltip when it was hidden, now I kept the tooltip-removal code untouched.)

This is why, unlike many of my previous attempts, at this time I am opening a new PR. Just as I knew chances of merging were poor in the past - this time I sincerely believe there is no reason for not being embraced. The code is absolutely simple, unobstrusive and harmless. Please, take a look and consider. Thank you.

@chrisirhc chrisirhc reopened this
@chrisirhc
Owner

#1848 is pending a name poll, otherwise, it's mostly good to merge.

@chrisirhc chrisirhc referenced this issue from a commit in chrisirhc/angular-ui-bootstrap
@chrisirhc chrisirhc feat(tooltip): add tooltip-template directive
Fixes #220
a169511
@chrisirhc chrisirhc closed this in #1848
@QuentinFchx

Can't believe this just happened :joy:
Congratz everybody and especially @chrisirhc

@nomospace

Your guys kicked ass!

@Yappli

I want to cry. Thanks everybody.

@karianna
Owner

FYI - Actually resolved in 0.13.0 but due to GitHub DDOS I can't change the milestone

@metanav

Will it be part of 0.12.2 release?
What is the expected release date (or month) of 0.12.2 or 0.13.0?

@karianna
Owner

There won't be a 012.2, 0.13.0 is the next release, no concrete ETA yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.