Question

我没有使用transclude选项编写了一个指令。

但是现在，当我可以在使用其他属性或其他属性调用指令时激活transclude函数/选项会很好。

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

任何想法如何选择性地激活Angular 1.2.x中的转换

编辑：

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

Answer 1

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

.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

希望这会有所帮助。

AngularJs是可选的transclude

1 个答案: