Angular ui bootstrap 带模板的弹出框

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: 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)

我创建了一个包含 bootstrap 组件的模板，我正在使用此模板创建 bootstrap 弹出框。谁能纠正我的错误

Answer 1

我今天遇到了这个问题，当我正要post同样的问题时，当我输入我的post标题时，我遇到了this post.Which in turn led me to the jquery documentation。

基本上我所做的就是去除模板中的空格并且效果很好。即：

之前：

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

之后：

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

由于 Angular UI Bootstrap 不依赖于 jQuery，我不知道为什么这是一个问题，因为我没有真的研究了为什么这样做，我想我会 post 同时。

Answer 2

有同样的问题。解决了更改加载 jquery 和 bootstrap 的顺序的问题。现在我加载 bootstrap 然后 jquery 似乎解决了它。不过还是很奇怪。

Answer 3

只是想指出，要求的根源似乎是字符串必须以 < 字符开头。因此，您实际上不需要将所有内容都放在一行中（这对于更复杂的模板来说不是很好）。以下对我有用：

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

在开头 <script> 之后立即添加 <span></span> 允许模板的其余部分呈现为 HTML。

Angular ui bootstrap 带模板的弹出框

Angular ui bootstrap popover with template

javascript

jquery

twitter-bootstrap

angularjs

angular-ui-bootstrap