4

I posted an earlier question: angular-ui-bootstrap: Implementing html in popover using popover-html and it was suggested I use popover-template.

<i popover-template="popover-partial.html" popover-title="In Progress" class="glyphicon glyphicon-info-sign"></i>

<script type="text/ng-template" id="popover-partial.html">
    <b>Jody</b>
</script>

So I'm trying to do that but now the popover won't activate on click.

I'm using version 0.13.4.

2 Answers 2

12

popover-template value should be string, In other way you could say that, it needs an expression/scopeVariable.

<i popover-template="'popover-partial.html'" 
  popover-title="In Progress" 
  class="glyphicon glyphicon-info-sign">
</i>

Demo

Sign up to request clarification or add additional context in comments.

1 Comment

I just changed to <i popover-template="'popover-partial.html'" popover-title="In Progress" class="glyphicon glyphicon-info-sign"></i> and it still doesn't activate on click.
4

You have to expose the template to the scope for it to work. This is better anyways as now your template can be more dynamic by setting variables and models on the scope. You can also set up a template provider so you don't have all of these little script tags under your html code.

In your view:

<i popover-template="popover.templateUrl" 
popover-title="popover.title" class="glyphicon glyphicon-info-sign"></i>

<script type="text/ng-template" id="popover-partial.html">
<b>Jody</b>
</script>

In your controller:

$scope.popover = {
templateUrl: 'popover-partial.html',
title: 'Title'
};

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.