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

Question

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

我在 http://plnkr.co/edit/Cuku7qaUTL1lxRkafKzv 有一个 plunker它不起作用，因为我不知道如何在 plunker 中获取 Angular-UI-bootstrap。

<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>

Answer 1

$interpolate 不处理像 ngRepeat 这样的指令( Difference between parse, interpolate and compile ). $interpolate :

Compiles a string with markup into an interpolation function. This service is used by the HTML $compile service for data binding.

处理ngRepeat 和其他你想要的指令$compile .但不幸的是，对于您的用例，$compile 会导致一些更改，因为:

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

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

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

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

所以我们不能在您的服务中将 $interpolate 替换为 $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 或 $sanitize，因此您服务中的函数可以缩小到只返回适当的模板:

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

demo fiddle