Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

feat(popover): support templates #1848

Merged
merged 2 commits into from
Mar 28, 2015

Conversation

chrisirhc
Copy link
Contributor

Update: This is ready to merge.
Here's a poll for anybody to get involved in voting to name this directive:
http://goo.gl/forms/oxW1B4L81B
Thank you. It'll be called popover-template and tooltip-template.

Update: I finally got to this. This should be ready for testing.

TODO:

  • Needs Tests
  • Needs documentation
  • Doesn't support live updating of the positioning after the template has been reloaded
  • Doesn't support changing of the template URL (there's no watcher)

This is a proof of concept to use a tooltipController to transclude a template.

It's based off #1600 and most of the changes are from that. See chrisirhc@0a1510c for actual changes for the popoverWindow.
record

Tests are missing but I wanted to open this up for discussion or comment.

Fixes #220

@chrisirhc
Copy link
Contributor Author

@pkozlowski-opensource , do take a look and let me know what you think. I know you have some other ideas for implementing this, but I was hoping this would be of some inspiration.

@jkarmel
Copy link

jkarmel commented Mar 21, 2014

It would be great to get this merged in!

@pderksen
Copy link

I agree this would be a fantastic addition. I'm good with just an "allowHtml" attribute as well if that's easier.

@emadd
Copy link

emadd commented Mar 30, 2014

Looking forward to this!

@dmackerman
Copy link

This is a great feature.

@czjvic
Copy link

czjvic commented Apr 2, 2014

I think, that popovers should work same as modals. Same parameters, same functions. (templateUrl, template, scope, resolve, controller) Popover may be sometimes used like "small modal" (for example: Facebook and notification popover at the left top of the page).

@TimothyKrell
Copy link

I've been thinking along the same lines as @czjvic as well. I would love to have all the same features and behavior in a popover that I get in a modal. I am frequently requiring this in my projects.

@kencaron
Copy link

Just plugged this into my project, works great for me. Anyone on the angular-ui team have an opinion on this PR?

@cboden
Copy link

cboden commented May 5, 2014

👍

@MWallenberg
Copy link

I agree with @TimothyKrell: This feature would be really useful for my projects as well. I'm a little surprised it wasn't included in 0.11.0, actually.

It works fine if applied in the snapshot, but no longer applies cleanly to the 0.11.0 release. @chrisirhc, any chance, you could create a new PR from the latest stable code?

@chrisirhc
Copy link
Contributor Author

@MWallenberg , thanks for pointing out that it no longer applies cleanly. Rebased!

@meandavejustice
Copy link

i want this!

@just-boris
Copy link
Contributor

I want it too

@kevinhikaruevans
Copy link

Man, how hasn't this been added yet?

@dmackerman
Copy link

Just use the module from angularStrap until this is merged in. That's my solution at least. 😄

@MWallenberg
Copy link

That's what I ended up doing as well. They use the same names for a few
services, so you have to edit the angularStrap code and rename some modules.
Den 28 maj 2014 15:18 skrev "Dave Ackerman" notifications@github.com:

Just use the module from angularStrap until this is merged in. That's my
solution at least. [image: 😄]


Reply to this email directly or view it on GitHubhttps://github.com//pull/1848#issuecomment-44404757
.

@just-boris
Copy link
Contributor

@MWallenberg you can include some modules from angular-strap, some from here. I do it like this:

angular.module('app', [
    // I use modal and dropdown from
    // angular-ui-bootstrap
    'ui.bootstrap.tpls',
    'ui.bootstrap.modal',
    'ui.bootstrap.dropdownToggle',
    // but I have a popover from
    // angular-strap
    'mgcrea.ngStrap.popover',
]);

@langfors
Copy link

langfors commented Jun 4, 2014

please merge this! 👍

@kentcdodds
Copy link

Would love to hear what reservations there are about this @pkozlowski-opensource. Looks like @chrisirhc worked hard on this. Would at least like some feedback so we can get this in. I'm sure you're as tired of hearing about the need for this feature as we are waiting for it. :-)

@niftybit
Copy link

Would be nice to see this reviewed and merged.

@bfontaine
Copy link

Any update on this?

@wesleycho
Copy link
Contributor

This needs documentation in the README

@chrisirhc
Copy link
Contributor Author

Added documentation and tests. Also picked tooltip-template and popover-template as the directive names.

Should only merge this after #3435 .

@chrisirhc chrisirhc changed the title feat(popover): support templates (WIP) feat(popover): support templates Mar 25, 2015
@chrisirhc chrisirhc merged commit a169511 into angular-ui:master Mar 28, 2015
@just-boris
Copy link
Contributor

👏 brilliant! How long I waited this.
But I already have moved my app to https://github.com/mgcrea/angular-strap while you are doing this

@rvanbaalen
Copy link
Contributor

Well.. @just-boris Now you have a good reason to migrate back ;-)

@mattdarveniza
Copy link

Woo!

@stramel
Copy link

stramel commented Mar 30, 2015

The time has finally come! Great job guys!!!!! 👍 👍 👏

@kernel-io
Copy link

I can't believe it finally happened.......

@pankas87
Copy link

Is this already available?

@rvanbaalen
Copy link
Contributor

It is, in the master branch @pankas87. There will be an official 0.13.0 release including this feature soon.

@pankas87
Copy link

Oh, I see @rvanbaalen. I'm using Rails Assets (A Bower wrapper for Rails) to install the library, I have to wait for the 0.13.0 release so it updates via bower right?

@dallasclark
Copy link

(dance)

@rvanbaalen
Copy link
Contributor

Indeed @pankas87. As soon as we publish 0.13.0, you'll be able to update through bower.

@stramel
Copy link

stramel commented Apr 9, 2015

@rvanbaalen @pankas87 You can update through bower now by pointing to the master branch instead of a version.

@pankas87
Copy link

That is awesome @stramel I'll do that! Thanks

@masscrx
Copy link

masscrx commented Apr 15, 2015

o./

@jpetraws
Copy link

Not sure if I am doing this wrong or what...

<div class="col-lg-12">
  <legend>Android Industries
    <i class="fa fa-truck"
       popover-placement="bottom"
       popover-template="{{templateUrl}}"
       popover-title="Requests for shipments">
      <span class="badge">2</span>
    </i>
  </legend>
</div>

##js

$scope.templateUrl = 'app/views/android-industries-popover-template.html';

I get the following error message...

GET http://localhost:63342/MOCK_UPS__2/MOCK_UPS_2/app/template/popover/popover-template.html 404 (Not Found)
angular.js:11594 Error: [$compile:tpload] Failed to load template: template/popover/popover-template.html
http://errors.angularjs.org/1.3.9/$compile/tpload?p0=template%2Fpopover%2Fpopover-template.html

It is not even trying to look for my template... and even if I do bring that template in, then it will just make the string 'app/views/android-industries-popover-template.html' the content in the popover.

@chrisirhc
Copy link
Contributor Author

Use templateUrl without the braces. Also, please open a new issue, don't comment on this issue. It's merged and we generally won't read it.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.