Angular ui bootstrap popover with template

Question

<a data-ng-href="" uib-popover-template="'profile.html'" popover-placement="bottom"></a>

<script type="text/ng-template" id="profile.html">
    <div class="media">
        <div class="media-left">
            <a data-ng-href="">
                <img class="media-object" data-ng-src="" alt="">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading" data-ng-bind="mainCtrl.Authentication.getUser().fullName">Unknown User</h4>
        </div>
    </div>
</script>

error

Error: Syntax error, unrecognized expression: <div class="media">
        <div class="media-left">
            <a data-ng-href="">
                <img class="media-object" data-ng-src="" alt="">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading" data-ng-bind="mainCtrl.Authentication.getUser().fullName">Unknown User</h4>
        </div>
    </div>
    at Function.Sizzle.error (jquery.js:4421)
    at tokenize (jquery.js:5076)
    at select (jquery.js:5460)
    at Function.Sizzle [as find] (jquery.js:3998)
    at jQuery.fn.extend.find (jquery.js:5576)
    at jQuery.fn.jQuery.init (jquery.js:196)
    at jQuery (jquery.js:62)
    at compile (angular.js:7543)
    at ui-bootstrap-tpls.js:4688
    at processQueue (angular.js:14792)

I created a template with bootstrap components and i am using this template to create bootstrap popover. can someone correct my mistake

Answer 1

I encountered this issue today and when I was about to post the same issue, when I entered my post title, I came across this post.Which in turn led me to the jquery documentation.

Essentially what I did was strip the spaces in the template and it worked fine. I.E:

Before:

<script type="text/ng-template" id="deletePopover.html">
    <div>Sample template.</div>
</script>

After:

<script type="text/ng-template" id="deletePopover.html"><div>Sample template.</div>
</script>

As Angular UI Bootstrap doesn't have a dependency on jQuery, I don't know why this is an issue and as I haven't really looked into why this works, I thought I'd post it in the meantime.

Answer 2

Had the same problem. Resolved changing the order of loading jquery and bootstrap. Now I load bootstrap and then jquery and it seems to solve it. But strange nonetheless.

Answer 3

Just want to point out that it seems that the root of the requirement is that the string must start with a < character. So you don't actually need to stick the whole thing on a single line (which isn't very nice for a more complicated template). The following works for me:

<script type="text/ng-template" id="template.html"><span></span>
    <div>
        Hello there
    </div>
</script>

Having the <span></span> immediately after the opening <script> allows the rest of the template to be rendered as HTML.