Question

我从使用指令获取填充了数据的模板时遇到了问题。

这就是我所拥有的：

app.directive('mypopover', function ($compile,$templateCache) {

        return {
            restrict: "A",
            link: function (scope, element, attrs) {
                var popOverContent;

                popOverContent = $templateCache.get('personPopOverTemplate.html');                  

                var options = {
                    content: popOverContent,
                    placement: "right",
                    html: true,
                    date: scope.date
                };
                $(element).popover(options);

                $compile(element.contents())(scope);

            }
        };
    });

<script type="text/ng-template" id="personPopOverTemplate.html">
    <div><b>Navn:</b>{{scope.row.entity.Navn}}</div>
    <div><b>Email:</b>{{scope.row.entity.Email}}</div>
    <div><b>Ansættelsessted:</b> {{scope.row.entity.Ansaettelsessted}}</div>
</script>

问题是，最终显示的是

导航： {{scope.roe.entity.Navn}}

电子邮件： {{scope.row.entity.Email}}

Ansættelsessted： {{scope.row.entity.Ansaettelsessted}}

我无法弄清楚为什么它没有呈现正确的数据。如果我暂停指令并从控制台尝试并访问scope.row.entity.Navn有一个值。

但是模板中没有显示。谁知道问题是什么？

Answer 1

我不确定您的代码是否包含您设置范围变量的部分，但请尝试使用此视图：

<script type="text/ng-template" id="personPopOverTemplate.html">
    <div><b>Navn:</b>{{row.entity.Navn}}</div>
    <div><b>Email:</b>{{row.entity.Email}}</div>
    <div><b>Ansættelsessted:</b> {{row.entity.Ansaettelsessted}}</div>
</script>

您无需在模板中使用scope对象。当angular解析您的模板时，它将解释您用作scope属性的每个变量。因此，当您在模板中使用{{scope.row.entity.Name}}时，它会查找变量：scope.scope.row.entity.Name

Answer 2

您遇到的问题是您需要编译模板，而不是元素，但是在使用$templateCache获取选项后，需要先将其分配给选项。

示例：

app.directive('mypopover', function($compile, $templateCache) {
   return {
      restrict: "A",
      link: function(scope, element, attrs) {
         var popOverContent, options;
         popOverContent = $compile($templateCache.get('personPopOverTemplate.html'))(scope);

         options = {
            html: true,
            trigger: 'hover',
            content: popOverContent,
            placement: "bottom"
         };

         $(element).popover(options);
      }
   };
});

Working Plunker

另外，要正确渲染HTML，我必须删除标记中的所有空格以及绑定中的scope声明：

<script type="text/ng-template" id="personPopOverTemplate.html">
      <div><b> Navn: </b>{{row.Navn}}</div> <div> <b> Email: </b>{{row.Email}}</div> <div> <b> Ansæ ttelsessted: </b> {{row.Ansaettelsessted}}</div>
</script>

AngularJS模板无法呈现正确

2 个答案: