AngularJS编译静态模板

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

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

要内插值，您需要执行scope.$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
});