current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite
2

I have the snippet below in my HTML:

<a ng-href="#" popover popover-template="views/popovers/cu.html" popover-trigger="click" popover-placement="top">
  <img ng-src="{{chat.avatar}}" width="50" height="40">
</a>

Clicking the a tag does not trigger the popover. Popover's in my application work without HTML, but not with.

I've essentially copied the "Popover with Template" section from the docs here: https://angular-ui.github.io/bootstrap/#/popover

But it still does not function as it does in the example above.

What's wrong?

share|improve this question
1  
you don't need the popover attribute when you have the popover-template attribute, also ng-href="#" isn't necessary – Betty St Jun 19 '15 at 19:58
    
No difference. It wasn't working even before I added it. – Noah Jun 19 '15 at 20:00
    
Does it work when you remove ng-href="#" ? – Betty St Jun 19 '15 at 20:00
2  
Is it safe to assume you're wrapping this a element inside another element with a ng-controller atribute? – Aprendiz Jun 19 '15 at 20:03
1  
what's inside cu.html? – Petra Jun 19 '15 at 20:20
up vote 0 down vote

Try this: Assuming that you're not using the script tag, and you're using a separate html file, add an extra single quote in your popover-template. See my example on plunkr. So that should be popover-template="'cu.html'" instead of popover-template="cu.html".

<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top" >
  <img ng-src="{{chat.avatar}}" width="50" height="50">
</a>

Edit: Another way to achieve this is using the script tag and having 'text/ng-template' as the type. The id would be the text that you place inside the popover-template. Take a look at this version on plunkr.

So I would look this:

<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top">
  <img ng-src="{{chat.avatar}}" width="50" height="50">
</a>

<script type="text/ng-template" id="cu.html">
    <div>
      Hey there!
    </div>
</script>
share|improve this answer
    
That didn't do the trick. – Noah Jun 19 '15 at 21:14
    
Let me try again.. – Petra Jun 19 '15 at 21:16
    
Added an alternative. Please see the edited version of my answer. – Petra Jun 19 '15 at 21:24
    
That didn't do it either. I'm thinking maybe it's something else in my Angular app causing the problem. – Noah Jun 22 '15 at 14:37
    
Are you sure you have the correct path in popover-template? – Petra Jun 22 '15 at 17:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.