Angular ui bootstrap popover与模板

时间:2016-01-16 23:10:20

标签: javascript jquery angularjs twitter-bootstrap angular-ui-bootstrap

<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 popover。有人可以纠正我的错误

3 个答案:

答案 0 :(得分:4)

我今天遇到了这个问题,当我即将发布同一个问题时,当我输入帖子标题时,我遇到了this post。这反过来又引导我进入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,我不知道为什么这是一个问题,因为我还没有真正研究过为什么会这样,我想我会在此期间发布它。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

只是想指出,似乎要求的根源是字符串必须以<字符开头。所以你实际上并不需要将整个事情都放在一条线上(这对于更复杂的模板来说并不是很好)。以下适用于我:

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

在打开<span></span>后立即使用<script>,可以将模板的其余部分呈现为HTML。