让 ng-repeat 在 AngularJS 的 $interpolate 服务中工作

我正在使用 Bootstrap 的 AngularJs-UI 组件。我想将填写好的模板插入到弹出窗口功能的数据元素之一中。这适用于查找不在 ng-repeat 内部的所有元素。如何让 ng-repeat 元素在插值模板中工作？

我有一个笨蛋http://plnkr.co/edit/Cuku7qaUTL1lxRkafKzv它不起作用，因为我不知道如何将 Angular-UI-bootstrap 放入 plunker 中。

<div data-popover="{{createHTML()}}">some content</div>

我的本地范围有这个功能createHTML()看起来像这样。

angular.module('myApp', ['ngSanitize'])
  .controller("myController", function(myService){
    $scope.createHTML = function() {
      var thingy = { blah: "foobar", collection: [ "1", "2", "3" ] };
      return myService.html_for(thingy);
    }
  });

而且服务是

angular.module('myApp')
  .service('myService', function($templateCache, $interpolate, $sanitize, $log) {
    "use strict";

    function html_for(thingy) {
      var template = $templateCache.get('thingyTemplate.html'),
        link = $interpolate(template),
        html = link(thingy),
        unsafe = $sanitize(html);
      return unsafe;
    }

    return {
      html_for: html_for
    }
  });

模板：

<script type="text/ng-template" id="thingyTemplate.html">
  <div>
    <div><strong>Blah:</strong> {{blah}}</div>
    <div data-ng-repeat="foo in collection"><strong>Collection:</strong> {{foo}}</div>
    <div><strong>Collection[0]:</strong> {{collection[0]}}</div>
    <div><strong>Collection[1]:</strong> {{collection[1]}}</div>
    <div><strong>Collection[2]:</strong> {{collection[2]}}</div>
  </div>
</script>

<script type="text/ng-template" id="template/popover/popover.html">
<div class="popover {{placement}}" data-ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
    <h3 class="popover-title" data-ng-bind="title" data-ng-show="title"></h3>
    <div class="popover-content" data-ng-bind-html="content"></div>
  </div>
</div>
</script>

$interpolate不处理像这样的指令ngRepeat ( 解析、插值和编译之间的区别 ). $interpolate:

将带有标记的字符串编译为插值函数。这 HTML $compile 服务使用该服务进行数据绑定。

处理ngRepeat以及您想要的其他指令$compile。但对于你的用例$compile不幸的是，这将导致许多变化，因为：

• 它需要一个编译范围，而不仅仅是像这样的上下文$interpolate。此外，它需要范围thingy is on.

  这意味着我们需要在模板中引用您的属性，例如 {{thingy.blah}} 而不是 {{blah}}。

• 当弹出窗口位于 dom 上时需要进行编译。

• 弹出窗口仅在打开时出现在 dom 上。

所以我们不能只是替换$interpolate with $compile在您的服务中。

一种方法是替换data-ng-bind-html使用以下指令，其作用类似于ng-bind-html有一个内置的$compile（显然，您应该只将其与您知道安全的 html 一起使用）。

.directive('compile', function($compile) {
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compile);
      },
      function(value) {
        var result = element.html(value);
        $compile(element.contents())(scope.$parent.$parent);
      }
    );
  };
});

像这样使用（与compile替换ng-bind-html:

  <div class="popover-content" compile="content"></div>

一个问题是我们需要thingy处于范围内。有几种处理方法 - 但出于演示目的，我手动返回到调用弹出窗口的范围 - 这是 2 个范围，因此scope.$parent.$parent.

使用这个编译指令你不再$interpolate or $sanitize因此，您的服务中的函数可以缩小为仅返回适当的模板：

function html_for() {
  var template = $templateCache.get('thingyTemplate.html');
  return template;
}

demo fiddle