Question

我正在为我的应用程序使用angular-UI引导程序，不幸的是，tooltip指令不会采用模板并正确编译它。

我在ng-repeat中使用此标记来呈现搜索结果。理想情况下，我更愿意这样做：

<span class="list-group-item-actions col-md-2">
  <span class="information-container"
        tooltip-html-unsafe="{{ $templateCache.get('path/to/template.html') }}"
        tooltip-placement="left">
  </span>
</span>

但该指令不会执行.get，所以我直接在模型上添加模板，以便我可以这样渲染：

<span class="list-group-item-actions col-md-2">
  <span class="information-container"
        tooltip-html-unsafe="{{ result.tooltip }}"
        tooltip-placement="left">
  </span>
</span>

在我处理搜索的指令中，我试图像这样编译模板：

_.each(search_results, function(result) {
    var templScope = $scope.$new(true);
    templScope.result = result;
    result.tooltip = $compile($templateCache.get($scope.tooltip_template))(templScope).html();
});

这很接近，因为它呈现了我想要的模板，但它实际上并不执行模板中的任何指令或表达式。知道我哪里错了吗？

Answer 1

我找到了解决方案。不是最漂亮，但肯定有效。问题是我没有应用新的DOM元素，因此angular实际上并没有执行表达式或指令。我最终做的是：

_.each(res, function(item) {
    var templScope = $scope.$new();
    templScope.item = item;
    templScope.tooltip = $compile($templateCache.get($scope.tooltip_template))(templScope);
    _.defer(function() {
        templScope.$apply();
        item.tooltip = templScope.tooltip.html();
    });
});

值得注意的两件事

在运行$ apply（）之前无法调用html（），因为模板实际上并未使用正在评估的表达式进行编译
我必须使用_.defer（）来允许在下一个生命周期中调用$ apply（），否则在现有的摘要生命周期中调用它

我的角度模板没有正确编译

1 个答案: