Question

我有一个模板，我已将其包含在放入$ templateCache的视图中。

<script type="text/ng-template" id="ratesPopover">
    <table class="rate-table">
        <tr ng-repeat="rate in plan.rates">
            <td>Rate</td>
            <td>{{rate}}</td>
        </tr>
    </table>
</script>

然后我有一个指令，我想在传入范围的情况下编译模板，但我不想让模板绑定。我只是希望$ compile服务将模板编译为HTML的静态字符串，因此我可以将其添加到data-content属性中的Twitter Bootstrap Popover。不需要双向绑定。

var template = angular.element('<div>' + $templateCache.get('ratesPopover') + '</div>'),
    popover = $compile(template)(scope);

element.attr('data-content', popover.html());

我在显示弹出窗口时看到的是没有插入变量的编译模板。关于我可能做错的任何想法？

Answer 1

尝试注入$interpolate模块，然后执行

var template = '<div>' + $templateCache.get('ratesPopover') + '</div>',
    popover = $interpolate(template)(scope);

element.attr('data-content', popover);

Answer 2

这个问题很老，但我的回答可能对其他人有帮助，我最近遇到了同样的问题。

要插入执行范围所需的值。$ apply：

var template = angular.element('<div>' + $templateCache.get('ratesPopover') + '</div>'),
    popover = $compile(template)(scope);

scope.$apply(function () {
    // popover is now interpolated
});

如果你已经处于$ digest周期，那么调用$ apply将引发错误，在这种情况下你只需要等到摘要周期结束：

var template = angular.element('<div>' + $templateCache.get('ratesPopover') + '</div>'),
    popover = $compile(template)(scope);

$timeout(function () {
    // popover is now interpolated
});

AngularJS编译静态模板

2 个答案: