AngularJS在指令標記之間傳遞html內容

Question

我知道我可以這樣做：

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

然后通過my-directive端訪問attr 。

但是我想做這樣的事情：

<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

  }
 }
});

在這里閱讀更多