Question

我有一个指令foo，其模板包含ng-repeat列表：

<div>
  <h5>I want to insert transcluded template into body of the li:</h5>
  <ul>
    <li ng-repeat='item in items'>
       <!-- need item template here -->
    </li>
  </ul>
</div>

我希望每个项目的模板（可选）在指令使用时可以指定：

<foo items='people'>
   <h5>{{item.name}}</h5>
</foo>

<foo items='people'>
  {{item.name}} is {{item.age}} years old.
</foo>

所以我需要将指令的innerHTML（例如<h5>{{item.name}}</h5>）复制到指令模板中的标记位置。

<ng-transclude>执行此操作，但它为transcluded项提供了指令的范围而不是项。我还需要能够从其他地方选择项目模板。所以我需要手动进行转换。

我可以在link:期间访问已转换的内容，但此时相关的列表项已经消失！

<div>
  <h5>I need to insert transcluded template into body of the li:</h5>
  <ul>
    <!-- ngRepeat: item in items -->
  </ul>
</div>

我认为我需要在编译期间执行此操作，但不推荐传递给编译函数的转义函数。

Found a way to do it with a second directive, but that seems unnecessary...

Answer 1

您可以使用$ interpolate服务实现这一点，并根据您的方法进行更改，请参阅此处演示http://plnkr.co/edit/bSb7fEWiMTdNVJYyiXD8?p=preview

将动态模板设置为指令中的属性。

<foo template="'<h1>{{item.name}}</h1>'" items="people"></foo>

并将您的指令更改为：

app.directive('foo', function($interpolate) {
    return {
        scope: {
          items: '=',
          template:'='
        },
        restrict: 'E',
        transclude: true,
        templateUrl: 'foo-template.html',
        link: function(scope, element, attributes, controller, transclude) {

          //interpolate your template like below
          scope.getValue= function(item) {
           var exp = $interpolate(scope.template);
           var result =exp({item:item})
           return result;

          }
        }
    }
    });

并在您的模板中使用ng-bind-html

 <li ng-repeat='item in items'>
      <div ng-bind-html="getValue(item)"></div>
    </li>

不要忘记将 ngSanitize 模块添加到您的应用中

手动移动被抄送的内容

1 个答案: