Question

我有一个表格，每行都有一个弹出窗口悬停，在每一行上，弹出窗口内容应该有不同的内容。我制作了一个类似的popover模板：

<tr ng-repeat="x in myData">
    <td>{{ x.id  }}</td>
   <td>
       <script type="text/ng-template" id="templateId.html">
         This is the content of the template: {{ x.id  }}
        </script>
        <a href="#"> <span class="glyphicon custom-glyph glyphicon-zoom-in" mypopover data-placement="right" ></span> </a>
   </td>             
</tr>

我的JS

app.directive('mypopover', function ($compile,$templateCache) {
return {
    restrict: "A",
    link: function (scope, element, attrs) {
        var popOverContent = $templateCache.get("templateId.html");
        var options = {
            content: popOverContent,
            placement: "right",
            html: true,
                        trigger: 'hover'
        };
        $(element).popover(options);
    }
};
});

但是当我查看浏览器时，输出是：This is the content of the template: {{ x.id }}

正在{{x.id}}标记内解释<script>？我也是angularjs的新手。

Answer 1

为什么不只使用'uib-popover-html'结构指令而不是您创建的'mypopover'？

下载并声明依赖项'uib-bootstrap'。

然后templateId.html将知道变量x

这是文档https://angular-ui.github.io/bootstrap/

将范围变量传递给弹出模板angularjs

1 个答案: