AngularJS - 如何爲自定義指令設置css類？

Question

有對nav html元素，我要去的指令來使用這樣tab CSS類：

<nav tab></nav> 

它預計這樣解釋：

<nav class="tab"> 
    <a></a> 
    <a></a> 
    <a></a> 
</nav> 

...一切幾乎和預期一樣工作，除了這個問題，我無法將CSS類設置爲頂層<nav>元素。當然，我可以明確指定它使用ng-class，但它似乎不是一個好主意。

聽說過.addClass()選項，但它並沒有在所有的工作：

tab.directive('tab', function($compile) { 
     return { 
      restrict: 'A', 
      templateUrl: 'nav-tab.html', 
      controller: function($http, $scope) { 
       $http.get('/Tab/List') 
        .success(function(data) { 
         $scope.tabs = data; 
        }).error(function() { 
         alert("error"); 
        }); 
      }, 
      controllerAs: 'tab', 
      link: function(element, scope) { 
       angular.element(element).addClass('tab'); 
       $compile(element)(scope); 
      } 
     } 
    }); 

如何將CSS類添加到頂部指令元素，沒有它的明確的元素正確指定？

Answer 1

你必須在鏈接功能

link: function(scope, element, attrs) { 

一個錯誤的序列

link: function(element, scope) { 

改變它的

相反，然後你就可以直接做element.addClass爲jQLite API上有可用的.addClass方法。

Answer 2

我會改變你的指令是一個「元素」（用於屬性，而不是「A」「E」）

<tab></tab> 

tab.directive('tab', function($compile) { 
return { 
    restrict: 'E', 
    templateUrl: 'nav-tab.html'... 

然後添加類模板NAV-tab.html：

<nav class="tab"> 
    <a></a> 
    <a></a> 
    <a></a> 
</nav>