表格單元格中的角度變換

Question

我有一個屬性指令，它只是將類名稱添加到應用了它的元素上。該屬性指令應用於表格單元格<td>元素。當我在指令定義中有transclude: true時，它將替換表格單元格內容。我無法弄清楚爲什麼。自從我第一次面對這個問題以後，有人能幫助我嗎？

我的理解是定義transclude應該包含已經存在的內容，但不知道爲什麼我要面對這個問題。有人可以提出解決方案嗎？

下面是代碼，

angular.module('app', []).directive('indicator', function() { 

return { 
    restrict: 'AC', 
    replace: true, 
    transclude: true, 
    link: function ($scope, $elem, $attrs) { 
     if($attrs.type) { 
      $elem.addClass('indicator-'+$attrs.type); 
     } 
     else { 
      $elem.addClass('indicator');  
     } 
    } 
};}); 

在HTML指令定義會是什麼樣子，

<td indicator type="someType">5000</td> 

正如我前面提到的，如果我有transclude爲假，然後它工作正常。但是當我將transclude作爲true時，它會添加類，並且表單元格內容會消失。

Answer 1

擺脫replace和transclude屬性。

反正你明顯不想代替元素和replace is deprecated。

您也沒有使用ngTransclude指令（事實上，根本沒有指令模板），因此不需要transclude。

可以簡化整個事情下來

.directive('indicator', function() { 
    return { 
     restrict: 'AC', 
     link: function(scope, element, attrs) { 
      element.addClass(attrs.type ? 'indicator-' + attrs.type : 'indicator'); 
     } 
    }; 
})