Transclude在AngularJS中不添加新元素

是否有任何方法將某些內容轉換爲指令而不添加額外的元素。Transclude在AngularJS中不添加新元素

例如

指令：

{ 
    scope: { 
     someParam: "=" 
    }, 
    link: function(scope, element, attrs){ 
     //do something 
    }, 
    transclude: true, 
    template:'<div ng-transclude></div>' 
}

HTML源文件：

<div my-directive some-param="somethingFromController"> 
    my transcluded content: {{somethingElseFromController}} 
</div>

有了這個例子中的額外的div被添加到標記。通常這會很好，但我試圖在表內使用這個指令，所以添加一個div標籤會把事情搞砸。

我也試過沒有指定transclude或template，它擺脫了額外的div標籤，但現在{{somethingElseFromController}}無法找到，因爲「transcluded」內容處於隔離範圍。我知道我可以從鏈接函數中的attrs對象獲取指令的參數，而不是創建一個獨立的作用域，但我寧願避免使用作用域來評估字符串$ apply（）。

任何人都知道如何做到這一點？謝謝！

來源

2013-10-16 rob

什麼是「transcluded」內容'somethingElseFromController'是意味着提供？ –

可能是任何東西。例如來自控制器的字符串。我只需要將我的transcluded內容與控制器放在同一個作用域中。 – rob

角需要一個元素來'掛起'範圍。但是，如果您只是想添加行爲，那麼正如您所說的那樣，您不需要模板。是的，否則，請使用父範圍。 –

這實際上是可能與Angular。像ng-repeat這樣的指令可以做到這一點。下面是你如何做到這一點：

{ 
    restrict: 'A', 
    transclude: true, 
    compile: function (tElement, attrs, transclude) { 
     return function ($scope) { 
      transclude($scope, function (clone) { 
       tElement.append(clone); 
      }); 
     }; 
    } 
};

那麼這裏發生了什麼？在鏈接過程中，我們只是將克隆（我們試圖跨越的元素）追加到指令的元素中。 Angular會將$ scope應用於clone元素，這樣您就可以在該元素中完成所有的角度善良。

來源

2014-01-17 19:34:01 Vakey

值得注意的是，此解決方案在新版本的Angular中已棄用。具體來說，使用傳遞給編譯函數的transclude參數。除了在鏈接函數中使用transclude參數（第5個參數傳遞給鏈接）之外，目前接受的「正確」方法如上所述。 –

爲了詳細說明@搶的帖子...

Transclusion要求角創建是任何標籤的指令是內容的一個克隆的元素/住在...如果內容是文本，它將包裹在一個跨度。

這是因爲它有一個DOM元素來將範圍應用到$ compile被調用時。

因此，基本上transclude添加一個元素出於同樣的原因，你不能$compile('plain text here {{wee}}')。

現在，您可以做一些類似於您想要做的事情$interpolate，它允許您將範圍應用於字符串中的綁定，如「blah {{foo}}」....但是我真的不確定你想要做什麼，我真的不能給你一個具體的例子。

來源

2013-10-17 19:51:38

什麼是transclude？ – IamStalker

繁榮！令人驚訝的是找到一個簡單的答案需要多長時間，但是這一點在這裏爲我解開了它。「Transclusion要求Angular創建一個元素，該元素是指令所處/所在標記的任何標記的內容的克隆。如果內容是文本，則會將其包含在一個範圍中。」謝謝，先生！ –

@Vakey回答的是我正在尋找的東西。

但今天，角文檔說：

傳遞到compile功能棄用，因爲它例如在transclude功能不知道正確的外部範圍。請使用傳遞給鏈接函數的transclude函數。

所以我用，而不是controller（暫時）及其$transclude功能，在$compile documentation所示的例子中的一部分：

controller: function($scope, $element, $transclude) { 
      var transcludedContent, transclusionScope; 

      $transclude(function(clone, scope) { 
       $element.append(clone); 
       transcludedContent = clone; 
       transclusionScope = scope; 
      }); 
     },

來源

2015-08-17 19:20:31 edmundo096

對於Angular 2，現在知道這是** Projections **，請參閱http://stackoverflow.com/a/42019804/2012945 – edmundo096

Transclude在AngularJS中不添加新元素

回答

相關問題