是否可以有條件地將transclution應用於指令？

是否可以決定是否將變形應用到基於範圍變量的元素？是否可以有條件地將transclution應用於指令？

例如

app.directive('myHighlight', function() { 
    return { 
    transclude : true, 
    template : "<div style='border:1px solid red'><span ng-transclude></span></div>" 
    } 
}); 

app.directive('myDirective', function() { 
    return { 
    template : "<span>some text</span>", 
    link : function (scope,element,attr) { 
     if ('shouldHighlight' in attr) { 
      // wrap this directive with my-highlight 
     } 
    } 
    } 
});

然後在HTML

<span my-directive></span> 
<span my-directive should-highlight></span>

注（什麼我試圖達到愚蠢簡化減少例子），請不要告訴我只需添加突出顯示，而不應該突出顯示，正如我所說這是一個愚蠢的縮小示例。謝謝。

來源

2014-06-22 haki

而不是可選地應用高亮指令，總是應用它，並在該指令中做可選的包裝。可選的包裝與一個ng-if實現和布爾通過標記從myDirective傳遞給myHighlight：

<div my-highlight="someBooleanValue">some text</div>

的myHighlight模板：

<div ng-if="actuallyTransclude" style="border:1px solid red"> 
    <span ng-transclude></span> 
</div> 
<div ng-if="!actuallyTransclude" ng-transclude></div>

工作的jsfiddle：http://jsfiddle.net/wilsonjonash/X6eB5/

來源

2014-06-23 04:34:44

感謝您的建議，但我的問題是transcluded指令作爲元數據傳遞，所以我試圖找到一種方法來注入它的名稱（類似於$控制器服務）。我需要有條件地將不同的transcludded指令應用於不同的模板。 – haki

啊，好吧。那麼如何迴應這個努力呢？ ;） –

當我接近這些問題我只看着角度做了什麼。通常他們的源代碼非常易讀，易於重複使用。 ngTransclude是沒有什麼不同：

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngTransclude.js

我離開其餘的你。您可以創建您自己的也包含條件的攔截指令，也可以在if條件爲真時將代碼複製到特定指令中。

如果您仍有問題，請讓我知道，我們將設置一個重拳。

來源

2014-06-23 06:45:26 haimlit

當然。當您指定transclude選項時，您知道您可以使用ng-transclude聲明性地指示內容的位置。

在該指令的邏輯函數，你也將獲得一個transclude函數的引用（https://docs.angularjs.org/api/ng/service/ $編譯，見鏈接部分）：

function link(scope, iElement, iAttrs, controller, transcludeFn) { ... }

的transcludeFn將返回transcluded內容，這樣你就可以有條件地插入那些當你想要在你的指令的鏈接函數中。

實施例（http://jsfiddle.net/DKLY9/22/）

HTML

<parentdir flg="1"> 
    Child Content 
</parentdir>

app.directive('parentdir', function(){ 
    return { 
     restrict : 'AE', 
     scope: { 
      flg : "=" 
     }, 
     transclude : true, 
     template : "<div>Parent {{childContent}} Content</div>", 
     link : function(scope, elem, attr, ctrl, transcludeFn){ 
      if (scope.flg==1){ 
       scope.childContent="Include Me instead"; 
      } 
      else { 
       scope.childContent = transcludeFn()[0].textContent; 
      } 
     } 
    } 
});

這是一個簡化的例子。要更好地瞭解如何使用transclude功能，請參考以下內容：http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html

來源

2014-06-23 17:39:26 rchawdry

是否可以有條件地將transclution應用於指令？

回答

相關問題