Question

Angular 1.5引入了multi-slot transclusion。根据{{3}}：

transclude对象{slotA：'？myCustomElement'}将元素映射到slotA插槽，可以通过$ transclude函数访问

不幸的是，它没有给出任何这方面的例子。它提供的唯一例子根本没有提到插槽：

ListViewMain

有人可以使用$ transclude函数了解如何访问每个插槽吗？

Answer 1

我有类似的问题，但阅读ng-transclude的源代码有帮助。事实证明，$ transclude函数有第三个参数，即插槽名称。

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngTransclude.js#L190

简单示例：

＆＃13;

angular.module('app', []);

angular
  .module('app')
  .directive('dir', function () {
    return {
      transclude: {
        a: 'aT',
        b: 'bT'
      },
      link: function (scope, elem, attrs, ctrl, transclude) {
        transclude(function (content) {
          elem.append('<div>a</div>');
          elem.append(content);
        }, null, 'a');
        
        transclude(function (content) {
          elem.append('<div>b</div>');
          elem.append(content);
        }, null, 'b');
      }
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>

<div ng-app="app">
  <dir>
    <a-t>content of a</a-t>
    <b-t>content of b</b-t>
  </dir>
</div>

＆＃13;

如何从transclude函数访问转置槽？

1 个答案: