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

【问题标题】：Passing scope variable to a popover template angularjs将范围变量传递给弹出模板angularjs
【发布时间】：2016-07-06 03:12:51
【问题描述】：

我有一个表格，每行都有一个弹出框悬停，并且在每一行上，弹出框内容应该有不同的内容。我制作了一个这样的弹出框模板：

<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 的新手。

【问题讨论】：

标签： javascript angularjs popover

【解决方案1】：

你为什么不直接使用 'uib-popover-html' 结构指令而不是你制作的 'mypopover'？

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

那么templateId.html就会知道变量x

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

【讨论】：