bootstrap popover with "angular" content

9,263 views
Skip to first unread message

Marco Alves

unread,
May 20, 2012, 2:45:59 PM5/20/12
to ang...@googlegroups.com
Hi there.

Has anyone built a directive that extends the bootstrap popover to include content controlled by angular?

Thank you.

Dan Doyon

unread,
May 20, 2012, 3:13:58 PM5/20/12
to ang...@googlegroups.com

The home page of angularjs is using it, I’d start there.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/hsGLWSCi8w0J.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.


No virus found in this message.
Checked by AVG - www.avg.com
Version: 10.0.1424 / Virus Database: 2425/5011 - Release Date: 05/20/12

Marco Alves

unread,
May 23, 2012, 3:07:03 PM5/23/12
to ang...@googlegroups.com, dand...@yahoo.com
Hi Dan. Thanks for the reply to the email.

I've managed to implement a first attempt and got it working partially.

It loads the custom content (a few buttons and table), but the "widget" is not added to the DOM within the scope that "called" it -- I don't know if I'm explaining this clearly.

So, when a button is clicked, there ng-click points to a function that is out-of-scope -- it inherits the scope at the point of where the popover was inserted.

My problem now, given I'm both a angular and js newbie, is to rewrite the popover js to get the popover element inserted "correctly" in the DOM so it inherits the right scope.

Peter Smith

unread,
May 23, 2012, 3:23:58 PM5/23/12
to ang...@googlegroups.com, dand...@yahoo.com
Marco,

Create a jsFiddle and show us what the problem is.

Regards,

Peter

Marco Alves

unread,
May 23, 2012, 3:28:38 PM5/23/12
to ang...@googlegroups.com, dand...@yahoo.com
Will do that. Sorry for not having done it already.

Marco Alves

unread,
May 24, 2012, 11:28:34 AM5/24/12
to ang...@googlegroups.com, dand...@yahoo.com

Dan Doyon

unread,
May 24, 2012, 12:43:54 PM5/24/12
to ang...@googlegroups.com
FIrst things first Marco,

One of the mantras of angular is to not manipulate the dom in controllers. This sorta stuff needs to be put into a directive.  One of the key parts of wrapping other frameworks (jquery) is that when you need to inform angular of model changes ($scope.apply());

You might want to take a look at an offshoot project angular-ui for ideas.


Can't really address your issues right now but maybe someone else can 



--dan




--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/aWzlbYiHX8wJ.

Marco Alves

unread,
May 25, 2012, 6:56:10 AM5/25/12
to ang...@googlegroups.com
I've done a fiddle using the directive, but the problem seems to remain the same: the popover element is added outside the angular scope. 

When I click the button to close the popover it does nothing because it is not under "angular's domain".

...

On Sunday, May 20, 2012 7:45:59 PM UTC+1, Marco Alves wrote:

Marco Alves

unread,
May 25, 2012, 6:56:25 AM5/25/12
to ang...@googlegroups.com
Here is the fiddle http://jsfiddle.net/marco_m_alves/F3nfK/


On Sunday, May 20, 2012 7:45:59 PM UTC+1, Marco Alves wrote:

Dan Doyon

unread,
May 25, 2012, 12:52:48 PM5/25/12
to ang...@googlegroups.com
Marco,

I recalled a thread on Bootstrap Modal using pure angularjs, its fairly complex there are 2 flavors of the directive.  I put in a text box bound to controller.

http://jsfiddle.net/FrnQP/1/

--dan





--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/ynNv8IvZAncJ.

Andy Joslin

unread,
May 25, 2012, 1:28:35 PM5/25/12
to ang...@googlegroups.com
Here's the final version of that modal thing: http://ajoslin.github.com/angular-bootstrap-ui

Marco Alves

unread,
May 26, 2012, 6:06:38 PM5/26/12
to ang...@googlegroups.com
The problem is not with "modal" -- I also have that working as a directive widget.

The problem only occurs with the popover -- and I think it has to do with the popover element being added not as a child of the element which associated to the controller.

Andy Joslin

unread,
May 26, 2012, 7:26:51 PM5/26/12
to ang...@googlegroups.com
Ah, I see.  Ok, your problem is the bootstrap script creates a new DOM element and throws your popover-content in there (http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js).   Like you said, it's not created at the right spot. 

Something like this is how you would have to do it: http://jsfiddle.net/F3nfK/22/

I would have something like a .popover-close class on any element that should close the popover on click, and then search for those to close it.

To get around this DOM placement problem, you would have to rewrite it yourself in pure angular.


Andy Joslin

unread,
May 26, 2012, 7:28:00 PM5/26/12
to ang...@googlegroups.com
The last jsfiddle had an error, use this one: http://jsfiddle.net/F3nfK/23/

Marco Alves

unread,
May 27, 2012, 5:08:35 PM5/27/12
to ang...@googlegroups.com
Thanks Andy.

If anyone has the popover re-written for immediate consumption, please let me know. :D

Peter Bacon Darwin

unread,
Jun 4, 2012, 12:42:56 PM6/4/12
to ang...@googlegroups.com

The angular way is to keep all DOM manipulations only inside directives. Keeps things cleaner in the long run.
Pete

...from my mobile.

On Jun 4, 2012 4:26 PM, "Ján Koščo" <3k.st...@gmail.com> wrote:
I'm just curious why write directives for modals? It's just for more options? If somebody is satisfied with default behaviour it's possible to show modal like $('#myModal').modal('show');.

Jan

Dne pátek, 25. května 2012 18:52:48 UTC+2 Dan Doyon napsal(a):
Marco,

I recalled a thread on Bootstrap Modal using pure angularjs, its fairly complex there are 2 flavors of the directive.  I put in a text box bound to controller.

http://jsfiddle.net/FrnQP/1/

--dan
On May 25, 2012, at 3:56 AM, Marco Alves wrote:

Here is the fiddle http://jsfiddle.net/marco_m_alves/F3nfK/

On Sunday, May 20, 2012 7:45:59 PM UTC+1, Marco Alves wrote:
Hi there.

Has anyone built a directive that extends the bootstrap popover to include content controlled by angular?

Thank you.


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/ynNv8IvZAncJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/lLN1Jdhkp9sJ.

ganaraj p r

unread,
Jun 5, 2012, 4:20:50 AM6/5/12
to ang...@googlegroups.com
One greatest advantage I see with angular is that , you are not giving special meanings to element id's anymore. 

You dont have to do $("#mymodal") and then ensure that an element with #mymodal exists somewhere in your html. Not just that, each time you want to write a new dialog you keep writing this again and again. 

I feel sooo liberated after the directives approach of angular!
--
Regards,
Ganaraj P R

Dan Doyon

unread,
Jun 5, 2012, 12:42:39 PM6/5/12
to ang...@googlegroups.com
two-way databinding with your angular model.

On Jun 4, 2012, at 8:26 AM, Ján Koščo wrote:

I'm just curious why write directives for modals? It's just for more options? If somebody is satisfied with default behaviour it's possible to show modal like $('#myModal').modal('show');.

Jan

Dne pátek, 25. května 2012 18:52:48 UTC+2 Dan Doyon napsal(a):
Marco,

I recalled a thread on Bootstrap Modal using pure angularjs, its fairly complex there are 2 flavors of the directive.  I put in a text box bound to controller.

http://jsfiddle.net/FrnQP/1/

--dan
On May 25, 2012, at 3:56 AM, Marco Alves wrote:

Here is the fiddle http://jsfiddle.net/marco_m_alves/F3nfK/

On Sunday, May 20, 2012 7:45:59 PM UTC+1, Marco Alves wrote:
Hi there.

Has anyone built a directive that extends the bootstrap popover to include content controlled by angular?

Thank you.


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/ynNv8IvZAncJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/lLN1Jdhkp9sJ.

Misko Hevery

unread,
Jun 6, 2012, 8:13:31 PM6/6/12
to ang...@googlegroups.com
you may be interested in our implementation on angular-bootstrap- dropdownToggle https://github.com/angular/angular.js/blob/master/src/bootstrap/bootstrap.js

-- Misko
Reply all
Reply to author
Forward
0 new messages