AngularJs 可选的嵌入

Question

我写了一个没有 transclude 选项的指令。

但是，如果可能的话，在使用另一个属性或其他东西调用指令时，如果我可以激活 transclude 函数/选项，那就太好了。

如果这不可能，我看到的唯一方法是复制指令并在第二个指令中添加 Transclude，但随后我将我不愿意做的代码加倍。

关于如何在 Angular 1.2.x 中选择性激活嵌入的任何想法

编辑：

另一个问题是我需要在我的指令模板中设置 ng-transclude，因为它很大，只有几行可以被嵌入内容替换。

Answer 1

您可以有条件地修改模板以在compile: 函数中包含ng-transclude。

.directive('foo', function () {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    templateUrl: 'foo.html',
    compile: function (element, attrs) {
      if (attrs.bar !== undefined) {
        element.find('.may-transclude-here')
          .attr('ng-transclude', '');
      }

      return function postLink(scope, element, attrs, controllers) {
        scope.listEntries = ['apple', 'banana', 'tomato'];
      };
    }
  }
})

和一个 html 模板：

<div class="foo">
  <h4>Directive title</h4>
  <div class="may-transclude-here" ng-repeat="item in listEntries">
    Original content: {{item}}
  </div>
  <span>blah blah blah</span>
</div>

但是通过ng-transclude 嵌入的内容不会与ng-repeat 创建的每个项目的范围绑定。如果您还需要绑定，这里是 ng-transclude 的修改版本，它执行正确的范围绑定。

.directive('myTransclude', function () {
  return {
    restrict: 'EAC',
    link: function(scope, element, attrs, controllers, transcludeFn) {
      transcludeFn(scope, function(nodes) {
        element.empty();
        element.append(nodes);
      });
    }
  };
});

Plunker 示例： http://plnkr.co/edit/8lncowJ7jdbN0DEowdxP?p=preview

希望这会有所帮助。