ngTransclude在AngularJS

我是新來AngularJS，並在學習階段，我所遇到的ngTransclude，當我開始讀取原稿http://docs.angularjs.org/api/ng/directive/ngTransclude，我能得到，什麼確實，ngTransclude在AngularJS

可以在任何的你大家好，請告訴我ngTransclude的功能是什麼，當它包含在什麼時候，什麼時候發生改變，什麼時候它不包含在指令中。

請給我一個ngTransclude的清晰的理解，以及它的重要性，以及什麼時候可以使用它。

來源

2014-03-01 RAVI MONE

下面是我在網上找到的更好的解釋之一：[link]（https://egghead.io/lessons/angularjs-transclusion-basics）。如果您是AngularJS的新手，我強烈建議您查看[egghead.io]（https://egghead.io）上的其他視頻。他們非常清楚和信息豐富。 – bmceldowney

我只是想看看它的工作：

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

解釋「ngTransclude」的例子

想象的那樣說：「守無論是該元素的內部，裏面即使在我重寫它之後「。它最常用於指令。以下面的例子爲例，我定義了一個「強調文本」的指令，它實際上只是包裝我在「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>

如果你看看這個plunker（http://plnkr.co/edit/liRDIEy9sWoSPSHJ1oln?p=preview）。使用現代瀏覽器和輸出中的「查看源代碼」，您將看到發生了什麼。標籤保持精確，角度只是將它們包裹在「h1」中！完全是我們想要的！

這裏的關鍵是你可以在html中修改語義，行爲或任何你想要的東西！就我個人而言，我覺得這是最適合自定義控件的，而不是像我用過的那樣簡單。事實上，我的例子可能是一個非常糟糕的例子，因爲未來的程序員會知道什麼「h1」比他們知道「強調文本」會變成什麼快得多。這就是說，你明白了。

快速定製！

來源

2014-03-01 04:58:25

ngTransclude在AngularJS

回答

相關問題