AngularJS передает HTML-контент между тегами директивы

Question

Я знаю, что могу сделать это:

<my-directive attr="myAttr"></my-directive>

и затем получить доступ к attr через сторону my-directive.

Но я хочу сделать что-то подобное:

<my-directive attr="myAttr">
 <a href="">Some link that will apply with the my-directive directive too</a>
</my-directive>

Возможно ли это?

Answer 1

Использование ng-transclude может решить проблему:

// html
<my-directive my-attr="Hello">
 <a href="#">My link</a>
</my-directive>

// my-directive.js 

app.directive("myDirective", function() {
 return {
  transclude: true,
  template: "<h1>{{myAttr}: <ng-transclude></ng-transclude></h1>", // <h1>Hello: <a href...>...</a></h1>
  scope: {
   myAttr: "@"
  },
  link: ($scope, element, attrs) => {

    console.log($scope.myAttr); // Hello

  }
 }
});

Подробнее здесь