AngularJS中的ngTransclude

Question

我是AngularJS的新手，在學習階段，我遇到了ngTransclude，當我開始閱讀文檔http://docs.angularjs.org/api/ng/directive/ngTransclude時 ，我可以得到，真正的含義是什么確實，

你們中的任何人，請告訴我ngTransclude的實際作用，以及將其包含在指令中，何時未包含在指令中的更改。

請讓我清楚地了解ngTransclude，它的重要性以及何時使用它。

Answer 1

我只是想看看它的工作原理：

http://plnkr.co/edit/liRDIEy9sWoSPSHJ1oln?p=preview

示例說明

可以將“ ngTransclude”想象為“即使在我重寫它之后，也要保留該元素內部，該元素內部的任何內容”。 它最常與指令一起使用。 以下面的示例為例，我定義了一個指令“ emphasize-text”，該指令實際上將包裝“ h1”元素中提供的所有內容。 以下是該指令：

app.directive("emphasizeText", function () {
  return {
    restrict: 'E',
    transclude: true,
    template: '<h1 ng-transclude></h1>',
  }
});

現在，要在頁面上使用此代碼，以下html可以很好地工作：

<!-- transclude will keep text of course -->
<emphasize-text>Example With Just Text</emphasize-text>

<!-- transclude also keep html tags intact -->
<emphasize-text><i>Example With Italics Tag</i></emphasize-text>

<!-- translcude will even keep angular variables intact!  -->
<emphasize-text>
  <div>This is a first div</div>
  <div>This is a {{secondVariable}} div</div>
</emphasize-text>

如果您看一下這個插件（ http://plnkr.co/edit/liRDIEy9sWoSPSHJ1oln?p=preview ）。 使用現代的瀏覽器，並在輸出上顯示“查看源代碼”，您會看到發生了什么。 標簽保持精確，角度將它們包裹在“ h1”中！ 正是我們想要的！

關鍵是您可以修改html中的語義，行為或任何您想要的東西！ 就我個人而言，我覺得這最適合自定義控件-不適用於像我以前使用的簡單控件。 實際上，我的示例可能是一個非常糟糕的示例，因為將來的程序員將知道“ h1”比它們所知道的“強調文本”要快得多。 就是說，您明白了。

定制愉快！